I am using the framework ag-grid ()
I have changed the row-height to 50px.
<div
className="ag-theme-balham"
style={{
height: '90vh',
width: '100%',
'font-size': '18px',
'row-height': '50px'
}}
>
<AgGridReact
rowHeight={50}
columnDefs={columnsTaenze}
rowSelection={'multiple'}
onFirstDataRendered={this.autoSizeAll}
rowDragManaged={true}
enableColResize={true}
animateRows={true}
rowData={this.props.tabledata}
enableFilter={true}
onRowDragEnd={this.onRowDragEnd}>
</AgGridReact>
</div>
Sadly, I can not manage to center the cell vertically.
I have tried to change many classes, including ag-cell.
My css I tried:
.ag-cell{
line-height: 50px;
height: 100%;
vertical-align: middle;
}
But the cell isn`t centered:
//Edit / TIP
If you want to do yourself a favor, you should switch to react-table from Tanstack NOT AG-GRID company
You can use below CSS. No need to use hard-coded values in CSS for height.
.ag-row .ag-cell {
display: flex;
justify-content: center; /* align horizontal */
align-items: center;
}
Have a look at this plunk: ag-grid: text-align vertically center
You can set cell style to following
cellStyle: {
'height': '100%',
'display': 'flex ',
'justify-content': 'center',
'align-items': 'center ',
},
it's work for me.
To build on #Paritosh's answer...
You don't have to overwrite the ag-grid styles themselves. You can do something like this in your own stylesheet:
.cell-vertical-align-text-left {
display: flex!important;
align-items: center;
}
.cell-vertical-align-text-right {
display: flex!important;
flex-direction: row-reverse;
text-align: right!important;
align-items: center;
}
Then in your ag-grid column definition use your custom css style in the cellClass property.
var columnDefs = [
{
headerName: "Alerts",
colId: 'invoice_issues',
editable: false,
cellClass: "cell-border cell-vertical-align-text-right",
valueGetter: showInvoiceIssues,
autoHeight: true,
}
]
After upgrading ag-grid to version 28, I've noticed the vertical center alignment has been lost.
Below is a solution that retains the text-overflow: ellipsis (...) and overflow: hidden CSS rules when the text exceeds cell width.
Tested in ag-grid version 28.2.0
.ag-cell-wrapper {
height: 100%;
}
If you are noticing the same problem as the user above after upgrading to v28, probably you'll need to adjust the CSS/SASS imports. Not sure why this is not more explicit on the changelog.
In summary, you will need to drop the /dist part in the path:
<!-- old path -->
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community#28.0.0/dist/styles/ag-grid.css" />
<!-- new path -->
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community#28.0.0/styles/ag-grid.css" />
Reference:
https://www.ag-grid.com/archive/28.0.0/angular-data-grid/global-style-upgrading-to-v28/
https://www.ag-grid.com/archive/28.0.0/angular-data-grid/global-style-upgrading-to-v28-css/
Related
I'm really new when it comes to styling components and making them look the way I want.
My desired outcome is to have two box components that overlap each other for a nice clean look for displaying user stats and remaining targets for the day.
What I have in mind is:
If anyone can give me some pointers with regards to styling the box component to look like the above image, I would be really greatful.
To start please take a look at MUI Box, which provides a great description to play with the Box component of Material-UI.
Here is an example from the link
<Box
sx={{
width: 300,
height: 300,
backgroundColor: 'primary.dark',
'&:hover': {
backgroundColor: 'primary.main',
opacity: [0.9, 0.8, 0.7],
},
}}
/>
sx is being used for styling the Box component and inside this example we can see that we can change the width, height and background color of the box from the component itself. To something similar to what you had requested I took the liberty of using styled-components to style the Box component as follows:
import * as React from "react";
import Box from "#mui/material/Box";
import styled from "styled-components";
const DataBoxContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 20vh;
position: relative;
`;
const StyledOuterBox = styled(Box)`
border-radius: 20px;
position: absolute;
`;
const StyledInnerBox = styled(Box)`
border-radius: 10px;
position: relative;
bottom: 50px;
`;
const StyledData = styled.p`
color: black;
align-self: flex-start;
position: absolute;
bottom: 30px;
margin-inline-start: 20px;
`;
export default function DataBox() {
return (
<DataBoxContainer>
<StyledOuterBox
sx={{
width: 500,
height: 250,
backgroundColor: "gray"
}}
>
<StyledData>test</StyledData>
</StyledOuterBox>
<StyledInnerBox
sx={{
width: 480,
height: 200,
backgroundColor: "blue"
}}
/>
</DataBoxContainer>
);
}
Feel free to play with this example at CodeSandbox
I'm sure this can be improved but can give you an idea on how to start.
Please feel free to ask me any questions on it, as you requested for pointers but I have provided a code.
Hoping someone can assist. I am using the MobileStepper component, specifically:
https://mui.com/api/mobile-stepper/
and attempting to use a different background color for this stepper. Looking at the Dev Tools for this component, I found the following:
.MuiMobileStepper-root {
display: flex;
padding: 8px;
background: #fafafa;
align-items: center;
flex-direction: row;
justify-content: space-between;
}
I actually just want to change the background value to:
.MuiMobileStepper-root {
background: #dadada;
}
Unsure how to change this within my React component.
Not sure if it's an overrides/root style change?
This worked for me
<MobileStepper sx={{ bgcolor: 'transparent' }}/>
Is it possible to define primary and hover images for an <input type="image"> element in CSS in JS? I'm trying to implement a different image on hover, but can't get the syntax correct.
margin: 40,
background: "url(/btn_google_signin_light_normal_web.png)",
"&:hover": {
background: "url(/btn_google_signin_light_focus_web.png)"
}
}
You can try
IN your CSS
.yourClass {
width: 200px;
height: 200px;
background: url("images/iamge1.jpg") no-repeat;
display: inline-block;
}
.yourClass:hover {
background: url("images/image2.jpg") no-repeat;
}
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.
am facing a problem in changing the default check box image.
I have added two images checked.png and unchecked.png. and added two css classes for checked and unchecked. Only unchecked image is displaying but when i check it checked image is not displayed.
I have modified the default buttons by doing the same things below and it works well for buttons. But for checkbox this is not working.(pressedCls is not there in checkboxfield). Here is the small snippet for your reference.
{
xtype: 'checkboxfield',
ui:'plain',
checked: 'true',
action: 'didnotassisted_Action',
id: 'id_assignment_didNotAssisted',
cls: 'closeout-checkbox-unchecked',
// pressedCls: 'closeout-checkbox-checked'
},
css:
.closeout-checkbox-unchecked{
background-color:transparent;
background-image:url('../images/unchecked.png');
height: 44px;
width: 44px;
}
.closeout-checkbox-checked{
background-color:transparent;
background-image:url('../images/checked.png');
height: 44px;
width: 44px;
}
If there is any different approach to complete that please help me out.Thanks in advance.
#Andrea, Here is the screen shot of what am getting after applying your code.
Sencha is not using a class to differentiate the checkbox status, it leverages instead the :checked pseudo-class selector of the checkbox.
You can change the checkbox icons adding a pseudo-element :after to its .x-field-mask sibling.
Give ui: 'custom' to your checkboxfield and add these CSS:
.x-field-custom .x-input-checkbox:checked + .x-field-mask:after {
content: "";
height: 45px;
width: 45px;
position: absolute;
top: 0;
right: 1em;
background-image:url(http://png-4.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_checked.png);
background-size: contain;
display: block;
}
.x-field-custom .x-input-checkbox + .x-field-mask:after {
content: "";
height: 45px;
width: 45px;
position: absolute;
top: 0;
right: 1em;
background-image:url(http://png-2.findicons.com/files/icons/2232/wireframe_mono/48/checkbox_unchecked.png);
background-size: contain;
display: block;
}
Tested on Sencha 2.2.1