How can i make the dropdown fixed i.e., after selecting options , the dropdown is increasing its size if the option length is big. I dont want it to increase because it is disturbing other components which are beside it.
Ive my code like this:
dropdown:{
marginTop: 17,
maxWidth: '120%'
},
<Typography variant="h3" component="h3" style={{ marginBottom: 10}} gutterBottom>
Region
<div className={classes.dropdown}>
<Dropdown
options={this.state.regionList}
onChange={this.handleRegionChange}
/>
</div>
</Typography>
Please use both width and maxWidth. for example:
dropdown:{
marginTop: 17,
maxWidth: '200px'
width: '200px'
},
Related
I am relatively new to material UI and I have designed a text field of type search. I would like it to be responsive. But I am failing to render the textfield in screen sizes with width smaller than 423
<Box
sx={{ flexGrow: 1 }}
m={5} pt={5}
display="flex"
justifyContent="flex-end"
alignItems="flex-end"
>
<Grid item sx={{ flexGrow: 1 }} spacing={{ xs: 1, md: 2,lg:2}} columns={{ xs: 2, sm: 2, md: 12 ,lg: 22}} display="flex"
justifyContent="center"
alignItems="center" marginLeft={8} marginRight={1} mt={4} width='100%'>
<SearchIcon style={{ coSelf: "center", margin: "5px" }} />
<TextField
id="standard-search"
label="Search for a company..."
type="search"
variant="standard"
textAlign="center"
fullWidth
/>
</Grid>
<Button onClick={() => setLight((prev) => !prev)} variant="contained" color="primary" sx={{ height: 40 }}>
<SettingsIcon/>
</Button>
</Box>
Any help is appreciated.
Seems your search component is rendered but hiding behind the Stock Market Charting header as it gets longer in smaller screen sizes. If you have it as a fixed position try changing it to relative position, or remove/reduce the text inside it so it gets shorter for a quick test and might reveal the search component.
I created a Data Grid table with 10 columns. It looks great on big screens but when I squeeze it below 1380 px, I expect to see a horizontal bar scrolling but it looks terrible.
I don't want to switch to another library and just need to fix this horizontal scrolling problem. In the docs, it works perfectly. But I use renderCell and I think that cause the problem. But couldn't solve it still.
Here is how it looks like in big screens:
Here how it looks like at 1303 px:
And here on mobile sizes it can scroll but its sequeezed a lot and looks terrible:
I tried many suggestions on stack but couldn't find any solution still.
Here is my styled DataGrid props:
<DataGridStyled
rows={getRowData()}
autoHeight
rowHeight={80}
columns={columns}
rowsPerPageOptions={[5, 10, 15, 30, 100]}
pageSize={pageSize}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
checkboxSelection
disableSelectionOnClick
pagination
scrollbarSize={50}
/>
Here is the 5th column (I used renderCell maybe its because of this?):
{
field: 'bloodPressure',
headerName: 'BP (mmHg)',
headerAlign: 'center',
align: 'center',
type: 'string',
flex: 1,
editable: false,
valueGetter: (params) =>
params?.row?.bloodPressure?.lastSys === undefined
? null
: params?.row?.bloodPressure?.lastSys,
renderCell: (params) => {
return (
<Tooltip
sx={{ cursor: 'pointer' }}
followCursor
title={
params.row?.bloodPressure?.lastDate === undefined
? 'No measurement'
: moment(params.row?.bloodPressure?.lastDate).fromNow()
}
>
<Box
display="flex"
alignItems="center"
justifyContent="center"
width={'60%'}
bgcolor={params.row?.bloodPressure?.riskColor}
borderRadius={1}
py={0.3}
>
<Typography variant="subtitle1" color="black">
{params.row?.bloodPressure?.lastSys === undefined ||
params.row?.bloodPressure?.lastDia === undefined
? '--'
: `${params.row?.bloodPressure?.lastSys?.toFixed(
0
)}/${params.row?.bloodPressure?.lastDia?.toFixed(0)}`}
</Typography>
<Typography
variant="subtitle1"
color="black"
sx={{
display: 'flex',
alignItems: 'center'
}}
>
{params.row?.bloodPressure?.lastSys === undefined &&
params.row?.bloodPressure?.lastDia === undefined ? null : params
.row?.bloodPressure?.lastSys +
params.row?.bloodPressure?.lastDia >
params.row?.bloodPressure?.previousSys +
params.row?.bloodPressure?.previousDia ? (
<ArrowUpwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
) : (
<ArrowDownwardIcon
sx={{
fontSize: 14,
lineHeight: 1.75,
height: '100%'
}}
/>
)}
</Typography>
</Box>
</Tooltip>
);
}
},
hope you're all good.
I'm having an issue finding out how to make my MUI Grid take up the entire width of the Box component it is nested within.
Here is how it looks:
I want the empty space at the end right to be taken up by the entire grid but I can't seem to find a concise answer on how to fix this.
Here is my code in VS Code:
Here is the code in text for the Grid:
<Grid item key={days}>
<Box
key={days}
sx={{
width: 150,
height: 150,
backgroundColor: 'primary.dark',
'&:hover': {
backgroundColor: 'primary.main',
opacity: [0.9, 0.8, 0.7],
},
}}
/>
</Grid>
);
}
return (
<Grid container spacing={1}>
{/* And here I render the box array */}
{box}
</Grid>
);
And here is the parent elements:
Here is the code in real text for the parent elements:
// Parent Element
<Container>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: 1,
}}
>
{/* The Title of The Page */}
<Typography align="center" variant="h4" mt={2} mb={2} sx={{ fontWeight: 'bold' }}>
{t('Happy Chocolate Days!')}
</Typography>
{/* My Calendar Grid Component Inside The Box Component */}
<Calendar />
</Box>
</Container>
Thanks for any help in advance
You are setting the boxes to a fixed width & height of 150, thus even though their wrapper has more space left, there is not enough space for another box so it breaks into a new line, thus leaving you with the empty space on the right.
You either set the boxes all of them in the middle of the Container,
OR pick a width for the Container that can have 7 boxes of the same width with some space between them, like 770px width for container, and 10px spaces between them. but in that case you wont need Grid, just pure css.
I use Container and it needs to be different size for mobile and for desktop.
How can I have the Container maxWidth different size based on Breakpoints like this:
<Container maxWidth={{xs:"lg", lg:"md"}}>
instead of using the useStyle and adding a className.
I found most of answer related to functional component, but if you are using class component we can directly use like this. I like to use 'vh' and 'vw' as this unit is direclty adjustable to viewport.
<Container
sx={{
width: {
lg: '35vw',
md: '50vw',
xs: '70vw'
}
}}>
You can do that by using the sx prop which supports responsive values. The breakpoint values can be accessed in theme.breakpoints.values object. See the default theme here to know more.
const theme = useTheme();
<Container
sx={{
bgcolor: "wheat",
maxWidth: {
lg: theme.breakpoints.values["md"],
md: 80,
xs: 20
}
}}
>
<Box sx={{ bgcolor: "#cfe8fc", height: "100vh", width: "100%" }} />
</Container>
By adding the style attribute I can only change the color of the body part of the Card component. How can I change the title part as well?
<Card title='Card title' bordered loading={this.onLoading()}
style={{ backgroundColor: '#aaaaaa' }}>
<Row type='flex' justify='center'>
<h1>Card content</h1>
</Row>
</Card>
The following worked for me. I had to remove the background color of the entire card and set a different background color both for the Head and Body content:
<Card
title="Track title"
style={{backgroundColor: 'rgba(255, 255, 255, 0.0)', border: 0 }}
headStyle={{backgroundColor: 'rgba(255, 255, 255, 0.4)', border: 0 }}
bodyStyle={{backgroundColor: 'rgba(255, 0, 0, 0.4)', border: 0 }}
>
<Card.Meta
description="Track author"
/>
</Card>
Result:
Hope it helps!
Finally i have no choice and use css to get around that. The structure of the antd card is like
<div class="ant-card ant-card-bordered">
<div class="ant-card-head" \>
<div class="ant-card-body" \>
and .ant-card-head has the background style as #fff.
if I do sth like <Card style={{background:"#aaa"}}, it will override the .ant-card class. If I do <Card bodyStyle={{background:"#aaa"}}, it will override the .ant-card-body class and I couldn't find any direct way to override the .ant-card-head class, so I ended up use css to set the .ant-card-body background to none and it works.
For antd version 4.x
You can use headStyle and bodyStyle property to change the background color
<Card
title="Card title"
headStyle={{ backgroundColor: '#5c6cfa', color: '#ffffff' }}
bodyStyle={{ backgroundColor: '#a9bbff' }}
bordered={false}
style={{ width: 300 }}
>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
OR
You can customize the css class
.ant-card-head {
background: #5c6cfa;
color: #ffffff;
}
.ant-card-body {
background: #a9bbff;
}
Screenshot:
You have some typo. style:{{backgroundColor:'#aaaaaa'}} should be style={{ backgroundColor: '#aaaaaa' }} and it works for me:
Using the same code and it does work:
I may need to inspect your page to know why it doesn't work for you