Using material-ui autocomplete to select from about 600 items.
Is it possible to get autocomplete to offer a scrollable list of options?
You can modify the CSS of the list using listStyle...
<AutoComplete
listStyle={{ maxHeight: 200, overflow: 'auto' }}
...
/>
In the newest version of materiel ui (v4.9.11) it is possible as:
<AutoComplete
ListboxProps={{ style: { maxHeight: 200, overflow: 'auto' } }}
...
/>
I have simply used "sx" for scrollable list of options in Autocomplete.
<Autocomplete
sx={{ maxHeight: 200, overflow: 'auto' }}
...
/>
Related
there is that annoying black outline that appears in my material Ui autocomplete component on hover and I cannot even find in the css to remove it. I feel like I've tried everything. Does somebody have an idea about it? It just doesn't match the style of my project and the whole page looks bad because of it.
You can override the input component using "renderInput". This will allow you to provide a custom input component that does not have the hover effect.
Docs: https://mui.com/material-ui/react-autocomplete/#custom-input
<Autocomplete
sx={{
display: 'inline-block',
'& input': {
width: 200,
bgcolor: 'background.paper',
color: (theme) =>
theme.palette.getContrastText(theme.palette.background.paper),
},
}}
id="custom-input-demo"
options={options}
renderInput={(params) => (
<div ref={params.InputProps.ref}>
<input type="text" {...params.inputProps} />
</div>
)}
/>
I struggled a lot to remove the hover effect too. In my case could chaneg it using the .MuiInput-underline:hover:not(.Mui-disabled):before selector. I think in your case you could do something like
.MuiInput-underline:hover:not(.Mui-disabled):before {
border-bottom: 0 !important;
}
or something among those lines. Hope that helps.
I display a Table of users setup with infinite scroll. The first column contains the user name which varies in length. This makes the table jump in size as the list expands when scrolling down for more users. So I want to set a fixed width on that column and truncate the name column accordingly.
I tried to do it like but it doesn't work. The table cell adjust to the other cells and distributing the page width.
<Table>
<TableBody>
<TableRow>
<TableCell style={{ width: '20%' }}>
<Typography noWrap>SomeveeeeeeeeeeeeeryLoooooooooongNaaaaaame</Typography>
</TableCell>
</TableRow>
</TableBody>
</Table>
How do I achieve this?
Create an ellipsis style and use that on your Typography component.
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
ellipsis: {
maxWidth: 200, // percentage also works
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
});
...
const classes = useStyles();
<Table>
<TableBody>
<TableRow>
<TableCell>
<Typography className={classes.ellipsis}>
SomeveeeeeeeeeeeeeryLoooooooooongNaaaaaame
</Typography>
</TableCell>
</TableRow>
</TableBody>
</Table>
codesandbox
I am trying to customize CSS of a select component of material-ui this is inherited from class="MuiInputBase-root-97 MuiInput-root-84 MuiInput-underline-88 MuiInputBase-formControl-98 MuiInput-formControl-85" now i am stuck not able to change default design. Please help me, I don't have much experience with material-ui
I have tried to pass an object in classes props of select to change style applied by MuiInputBase-root-97, MuiInput-root-84, MuiInput-underline-88, MuiInputBase-formControl-98, MuiInput-formControl-85, and their pseudo class
const styles = theme => ({
root: {
'&$hover': {
color: 'red',
},
},
inputUnderline: {
minWidth: 220,
},
selectEmpty: {
marginTop: theme.spacing.unit * 2,
},
formControl: {
margin: theme.spacing.unit,
minWidth: 120,
},
});
<FormControl className={classes.formControl}>
<Select
value={this.state.age}
onChange={this.handelchange}
name="age"
displayEmpty
className={classes.selectEmpty}
classes={{
underline: classes.inputUnderline //change css of MuiInput-underline-88 and their pseudo class
root: classes.inputBaseRoot //want to change css of MuiInputBase-root-97 and their pseudo class
}}
>
<MenuItem value="" disabled>
Placeholder
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
<FormHelperText>Placeholder</FormHelperText>
</FormControl>
I want to remove border at the bottom on hover, focus, after, and before
I want a custom design in it overrides all CSS class at a select componentstrong text
In material-ui, you can override the style and customize it according to your requirement.
Please refer https://material-ui.com/customization/overrides/
How do you set the in-line font size on a Material-UI FormControlLabel? The below attempt does not work.
const styles: any = createStyles({
formControlLabel: { fontSize: '0.6rem',
'& label': { fontSize: '0.6rem' } }
});
<FormControlLabel style={styles.formControlLabel}
control={<Checkbox value="Hello" color="primary" />}
label="World"
/>
You could define the label as a Typography component and apply the style there:
<FormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label={<Typography style={styles.formControlLabel}>World</Typography>}
/>
UPDATE:
As per Saber's comment, newer versions should instead use:
<FormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label={<Typography className={styles.formControlLabel}>World</Typography>}
/>
Use material box fontSize instead of giving external style.
<FormControlLabel
control={<Checkbox name="checkbox" />}
label={
<Box component="div" fontSize={15}>
Small
</Box>
}
/>
FormControlLabel exposes typography as prop. tested and works in Mui V5. https://mui.com/api/form-control-label/#props
<FormControlLabel
componentsProps={{ typography: { variant: 'h3' } }}
/>
Use overrides section in theme.ts
export default createMuiTheme({
overrides: {
MuiFormControlLabel: {
label: {
fontSize: 14,
},
},
});
In MUI v5 you could do it like this:
<FormControlLabel
label={
<Typography sx={{ fontSize: 16 }}>
Label Text
</Typography>
}
control={<Switch />}
/>
Here's another option to achieve the same thing, but without the extra p that using <Typography /> will give you (referencing MUI v4 as the post is from before v5, although I'm sure this solution will work there too).
By referring to the docs for the FormControlLabel you can see the styles for the label can be modified with the label rule (kinda like you've tried to do already), however another approach would be to style the label by using withStyles
const StyledFormControlLabel = withStyles(() => ({
label: {
fontSize: '0.6rem',
}
}))(FormControlLabel);
...
<StyledFormControlLabel
control={<Checkbox value="Hello" color="primary" />}
label="World"
/>
I've been trying to figure out how to lessen the gap using css with no luck. I created the style object and used leftPosition key but the result was not the one I expected. I was expecting that the text is the only thing that will move. However, if you look at the screenshot specifically the first menu, the icon also moved. What I'd like to achieve is reduce the gap between the svn icon and the text.
import React from 'react';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
import ContentSend from 'material-ui/lib/svg-icons/content/send';
import Divider from 'material-ui/lib/divider';
import Assignment from 'material-ui/lib/svg-icons/action/assignment';
import Settings from 'material-ui/lib/svg-icons/action/settings';
import ManageDB from 'material-ui/lib/svg-icons/content/unarchive';
const style = {
menu: {
marginRight: 32,
marginBottom: 32,
float: 'left',
position: 'relative',
zIndex: 0,
width: 235,
},
rightIcon: {
textAlign: 'center',
lineHeight: '24px',
},
width: {
width: 235
},
leftPosition: {
left: 50
}
};
const LeftNavigation = () => (
<div>
<List>
<ListItem style={style.leftPosition} primaryText="Logs" leftIcon={<Assignment />} />
<ListItem primaryText="Manage DB" leftIcon={<ManageDB style={style.gap}/>} />
<ListItem primaryText="Top Issues" leftIcon={<ContentSend style={style.gap}/>} />
<ListItem primaryText="Settings" leftIcon={<Settings style={style.gap}/>} />
<ListItem primaryText="Logout" leftIcon={<ContentInbox style={style.gap}/>} />
</List>
<Divider />
<List>
<ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
<ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
<ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
<ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
</List>
</div>
);
export default LeftNavigation;
The accepted solution didn't work for me. Here is what I ended up doing after exploring the DOM.
const useStyles = makeStyles((theme) => ({
icon: {
minWidth: '30px',
}
}));
and then apply this class for the ListItemIcon as:
<ListItemIcon className={classes.icon}> <HelpOutlineIcon/> </ListItemIcon>
Hope it helps someone save time.
You can add style in ListItemIcon.
<ListItemIcon style={{minWidth: '40px'}} >
This is what worked for me. I set this in my global css file.
.MuiListItemIcon-root {
min-width: 40px !important;
}
If you want to do it globally use overrides in createMuiTheme
const theme = createMuiTheme({
overrides: {
MuiListItemIcon: {
root: {
minWidth: 40,
},
},
},
})
Note:
If you're using MUI version 5 then locate createTheme instead of createMuiTheme
This is my 2¢:
<ListItemText primary={<div style={{ margin: -25, marginTop: -7, color: 'white', fontSize: 11 }}>Your text here</div>} />
Adjusting margin (n.b., it's a negative number) and the top margin you can align the icon (on the left) with your text
You can also use sx prop instead of style, if you want access to the theme object, e.g.:
<ListItemIcon sx={{minWidth: (theme) => theme.spacing(4)}}>
This is only applicable to Mui 1.x.x. For later versions, please see responses to this answer below.
The ListItem renders a div called innerDiv with 72px left/right padding to render the left/right icon and label with sufficient space. You should try this in the Style -
<ListItem innerDivStyle={{paddingLeft: 60}} primaryText="Logs" leftIcon={<Assignment />} />
Replace 60 with whatever pleases you.
Just information for #Adam Mańkowski 's answer.
In MUI v5.5, you can config your theme like this.
createTheme({
components: {
MuiListItemIcon: {
styleOverrides: {
root: {
minWidth: 0
}
}
}
}
});