i am building an app targeted to tablet devices,
basically the main layout is :
Where the central area have three columns: navigation, header list, items details.
I want to give the user the possibility to horizontal collapse the header list
so then items details will expand.
Setting the prop orientation={'horizontal'}, it dont change the behaviour and keep collapsing in vertical.
Desired:
Reality:
Reading the code
https://github.com/mui-org/material-ui/blob/cce45deec3125c1f0dd6c1c74616b5e63b027026/packages/material-ui/src/Collapse/Collapse.js
Show that orientation can be horizontal:
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
Even there is a collapsedHeight, but not a collapsedWidth
function CollapsePanel(props) {
const [collapsed, setCollapse] = React.useState(true);//
//orientation: PropTypes.oneOf(['horizontal', 'vertical']),
return (
<Collapse in={collapsed} collapsedHeight={0} orientation={'horizontal'} >
<div style={{border:'5px solid blue',
display:"flex",flexDirection: "column", alignItems:"center",
minWidth:'180px', alignItems:"stretch", height:'calc(100vh - 40px)',}} >
<IconButton onClick={ ()=>setCollapse(!collapsed)}><ChevronLeftIcon/> Collapse</IconButton>
<div style={{display:"flex",flexDirection: "column", alignItems:"center", justifyContent: "space-around", flexGrow:'1', }} >
Headers List
</div>
</div>
</Collapse>
)
};
The package version is:
npm list --depth=0
#material-ui/core#4.11.3
What am i doing wrong?
4.11.3 doesn't have the orientation prop:
https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui/src/Collapse/Collapse.js
The link in your question points to the v5-alpha branch where orientation was added.
Related
I developed a multiple select component that have checkbox can select all and search. The component used Autocomplete and TextField.
I hope the select input can display the ellipsis when selected overflow one line. I set styles but it didn't work. It display all selected options in input.
When I click the select input it can't wake up the options drop-down box If I set overflow scroll and maxHeight .result is I need click twice .Probably because of the cursor position.
I added this to the AutoComplete and it worked for me.
sx={{
"& > .MuiAutocomplete-root .MuiFormControl-root .MuiInputBase-root": {flexWrap: "nowrap"}
}}
renderTags={
(list) => {
let displayList = list.map((item) => item.label).join(' • ');
// Render <Typography> elements instead of <Chip> components. Residence 1, Version 1 • Residence 1, Version 5...
return <Typography
noWrap={true}
sx={{ pl: 1 }}
color="textPrimary"
>
{displayList}
</Typography>;
},
}
When trying out the Material-UI basic example for Tree View (#mui/lab/TreeView), I do not know how to remove the horizontal scrollbar when using the overflowY: "auto" (The same effect even if I use overflow: "auto") option in the sx prop of the TreeView component. The horizontal scrollbar appears no matter how much space is available to the right. I want to keep the overflowY option in case of vertical overflow.
For example please see the basic tree view example from the official Material-UI page in StackBlitz or CodeSandbox.
How to remove the horizontal scrollbar when it's not needed?
This happens because the CSS classes .MuiTreeItem-content and its child .MuiTreeItem-label are set to 100% width by default, therefore, the .MuiTreeItem-content's 8px padding on x axis (also default) get in the way, adding 16px too many. You can easily override this by setting .MuiTreeItem-content's class padding to 0.
// ...
import MuiTreeItem from "#mui/lab/TreeItem";
import { styled } from "#mui/material/styles";
const TreeItem = styled(MuiTreeItem)(({ theme }) => ({
"& .MuiTreeItem-content": {
padding: 0,
},
}));
// ...
To remove the horizontal scrollbar completely you can hide the overflow over the X axis.
in css
.TreeView {
overflow-x: hidden;
}
or in jsx
<TreeView
sx={{ overflowX: "hidden" }}
...
>
I'm trying to style material-ui DataGrid component to justify the content in the cells. I am reading the material ui docs about styling but I don't seem to doing it correct and frankly find the docs on styling very confusing.
The doc here: https://material-ui.com/customization/components/#overriding-styles-with-classes implies I should be able to do something like this:
const StyledDataGrid = withStyles({
cellCenter: {
justifyContent: "center",
},
})(DataGrid);
<div style={{ height: 300, width: '100%' }}>
<StyledDataGrid rows={rows} columns={columns} />
</div>
However, when I do this, I don't see the style being added to the MuiDataGrid-cellCenter DOM element. Attaching a screenshot which shows the element classes. In the inspector I see that the style isn't being added (and if I add it manually I get the desired results). Am I not using the withStyles function correctly?
So after a bit more messing around, I believe the issue is that the DataGrid component does not support the classes property (which it seems most of the material ui components do). I believe the withStyles usage about is shorthand for passing the classes via the classes prop. Since the prop isn't listed in the API https://material-ui.com/api/data-grid/ I'm assuming this is why it isn't working. I confirmed that I can get the styles working by using a combination of the className parameter with descendant selection.
If someone determines I'm wrong and there is a way to get withStyles working on this component please comment.
const useStyles = makeStyles({
root: {
"& .MuiDataGrid-cellCenter": {
justifyContent: "center"
}
}
});
...
export default function X() {
const classes = useStyles();
return (
...
<DataGrid className={classes.root} checkboxSelection={true} rows={rows} columns={columns} />
...
)
}
ALTERNATIVE SOLUTION: (for others with similar issues)
If you are working within a class and cannot use hooks...
<div>
<DataGrid
rows={rows}
columns={columns}
sx={{
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}}
/>
</div>
In Blueprint.js MultiSelect example at https://blueprintjs.com/docs/#select/multi-select , after clicking on search box, exactly 10 items are shown. We can scroll down to view the rest.
How can I enable scrolling, and/or specify the maximum number of items displayed?
In the MultiSelect tag, add popoverProps props, then fill in popoverClassName with the custom css value:
.custom-class {
max-height: 150px;
overflow-y: auto;
}
<MultiSelect
popoverProps={{
popoverClassName: "custom-class",
}}
/>
In my app, the expansion arrow has to be in the left side of the panel.
But, by default it's displaying in the right side.
This :
<ExpansionPanelSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
IconButtonProps={{edge: 'start'}}
aria-controls='panel1a-content'
id='panel1a-header'
>
Doesn't made it.
Granted, you can't (easily) change the order in which the components appear in the HTML. However, there is a way using only CSS. ExpansionPanelSummary uses display: flex; you can therefore set the order property on the icon to make it appear to the left of the content.
This can be achieved with either useStyles or withStyles (Or possibly using plain CSS, but I haven't tried it); here's how you'd go about using the latter:
import withStyles from "#material-ui/core/styles/withStyles";
const IconLeftExpansionPanelSummary = withStyles({
expandIcon: {
order: -1
}
})(ExpansionPanelSummary);
You can then write the rest of your code using IconLeftExpansionPanelSummary instead of ExpansionPanelSummary when you want the icon to appear to the left. Don't forget to set IconButtonProps={{edge: 'start'}} on the component for proper spacing.
<AccordionSummary
className={classes.accordionSummary}
classes={{
expandIcon: classes.expandIcon,
expanded: classes.expanded
}}
IconButtonProps={{
disableRipple: true
}}
></AccordionSummary>
You can add class and use flex-direction
accordionSummary: {
flexDirection: 'row-reverse'
}
It's simple
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className={classes.panelSummary}>
add css against this class in jss like this
panelSummary:{flexDirection: "row-reverse"},
In case using css
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className="panelSummary">
add css against this class in jss like this
.panelSummary{flex-direction: row-reverse;}
you can get the expansion panel icon on left by removing it from expandIcon and add it as a children in Summary something like this
<ExpansionPanel defaultExpanded={true}>
<ExpansionPanelSummary aria-controls="panel1a-content">
{this.state.expanded ? <RemoveIcon/> : <ExpandIcon />}
<Typography component='h4' variant='h4'>My Expansion Panel</Typography>
</ExpansionPanelSummary>
<ExpansionPanelsDetails />
</ExpansionPanel>
The challenge is that the order is hardcoded into the codebase and you will not be able to use the ExpansionPanel as is.
If you look at the implementation, you will find the code as below
<div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
{expandIcon && (
<IconButton
disabled={disabled}
className={clsx(classes.expandIcon, {
[classes.expanded]: expanded,
})}
edge="end"
component="div"
tabIndex={-1}
aria-hidden
{...IconButtonProps}
>
{expandIcon}
</IconButton>
)}
As you see the <div> contains the text and then the IconButton is displayed.
So, you may have to work with what's provided out of the box or create your own Component based on what material-UI provides.
Hope that helps.
You can modify the CSS class like this:
notice the absolute position, in this way you can move the div that contains the icon whatever position you want with 'left' or 'right' properties
const useStyles = makeStyles((theme) => ({
ExpansionPanelSummaryExpandedIcon: {
'& div.MuiExpansionPanelSummary-expandIcon': {
position: 'absolute',
right: '5%',
},
}
}));
and then use in the ExpansionPanelSummary
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1bh-header"
className={classes.ExpansionPanelSummaryExpandedIcon}
>
references:
https://cssinjs.org/?v=v10.3.0
https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes