I would like to have a band over a component when the component is locked.
The Review component root is a Material UI Paper element that has a host of other elements inside this Paper. There are a half dozen of these particular elements on the page. When locked===true for each element, I want something to sit, centered (vert and horz), on top of the review element.
I found that a Popover element works fine as it can be moved to center/center. However, being a Modal, it doesn't allow interaction with the rest of the page.
<Popover
id={"id"}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'center',
horizontal: 'center',
}}
transformOrigin={{
vertical: 'center',
horizontal: 'center',
}}
>The content of the Popover.</Popover>
I then ensure that anchorEl points to the correct Paper. This works for a 'popover'... The popper element, which is one that isn't in the modal tree (and thus allows multiple and doesn't steal control of the entire app) doesn't have the positioning needed.
<Popper id={'popperID'} open={Boolean(anchorEl)} anchorEl={anchorEl} placement={'top'} transition>
{({ TransitionProps }) => (
<Fade {...TransitionProps}>
<div className={classes.busy}>The content of the Popper.</div>
</Fade>
)}
</Popper>
This puts the element vertically on top (y-axis) my anchorEl... which is not what I want.
I've also tried just putting another Paper in there, but it just ends up vertically 'below' my component.
EDIT: Worth noting I have also tried to position it with CSS. The problem is that absolute positioning (that should position it relative to the parent) seems to position it relative to the entire app instead of the JSX parent/component.
How can I do this?
Use absolute positioning as you said, but you have to give the parent component/element display: relative. Absolute positioning works from the closest ancestor that is not statically positioned. https://www.w3schools.com/cssref/pr_class_position.asp
Related
I am using material ui in react. I have a Popover component, which has a Grid component inside it. The size of the Grid component is dynamic, i.e. it's height can increase. The regular behavior of Popover is to make sure that it stays on the screen. But when I use a Grid component inside Popover , and when the height of the Grid increases, the Popover is overflowing and going below the screen.
return (
<Popover
open={Boolean(anchorEl)}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left',
}}
transformOrigin={{
vertical: "top",
horizontal: "left"
}}
aria-labelledby="draggable-dialog-title"
>
<div>
<DemoGrid />
</div>
</Popover>
);
function DemoGrid(){
const [list,setList] = useState(["hi"]);
return <Grid container spacing={2} >
<button onClick={()=>setList(prev=>[...prev,"hi"])}>add new</button>
{list.map((i,j)=><Grid item xs={8} key={i+j}>
<p>{`${j} ${i}`}</p>
</Grid>)}
</Grid>;
}
So the DemoGrid component, basically is the component which consists of a button, whose on click will add a new Grid item and thereby increase the height of the Grid component, now when the Grid items are too many, the Popover overflows below the screen as shown below.
What can I do so that the Popover stays on the screen. And why isn't the Popover retaining its properties when I use a display:flex (Grid component) inside it?
I am displaying some material-ui Cards horizontally in a div from data loaded from the backend and rendered server side using NextJS, however when the action property is present in the CardHeader, the view is distorted.
The distortion is a little bit hard to explain so I have reproduced it minimally in CodeSandbox. After removing the action property, the items are rendered correctly, however you will need to reload the mini-browser to see the effect.
<CardActionArea>
<Card>
<CardHeader
avatar={<Avatar alt={value}>{value}</Avatar>}
/** If action is removed, the issue goes away */
action={
<IconButton>
<ThumbUpOutlinedIcon />
</IconButton>
}
title={value}
subheader={value}
/>
<CardContent>
<Typography variant="h6">{value}</Typography>
</CardContent>
</Card>
</CardActionArea>
As you can see above the main div containing the items is at the top with the items horizontally arranged, however there are additional items which are arranged vertically below the div.
My guess is that the top items correctly rendered were rendered in the client side and the bottom items vertically rendered (which also shouldn't be there) were obtained from the server because on inspection of the source, the bottom incorrectly rendered items were not within the __next element.
Why is the presence of the action property in the CardHeader causing this? Or is it possible that my setup with Next and material-ui is incorrect? Thanks.
I am attempting to implement a responsive app with antd.
One of the things I have is a Sider menu as my main navigation. One of the things I would like to do is that on small screens this sider be collapsed (as the hamburguer icon preferrably). I have no idea how to even start this. My component with the sidebar looks something like this:
class App extends React.Component {
render() {
return (
<Layout>
<Sider width={200} collapsedWidth={500}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
}
I should probably also point out that from the Layout docs, the following is said:
Note: You can get a responsive layout by setting breakpoint, the Sider will collapse to the width of collapsedWidth when window width is below the breakpoint. And a special trigger will appear if the collapsedWidth is set to 0.
However I could not get this to work. Perhaps I misunderstand it.
Unfortunately I am not able to embed my sample app in the editor here, so I here is my working sample app. All I would like to do is collapse my Sider navbar into a hamburguer icon or even an arrow like icon on small screens. Where do I go from here?
You have a collapsible sider official example.
From here you can choose whatever width \ icons you need based on state.
Also, you have a good example of antd components, especially a sidebar with the hamburger icon.
I have a weird trouble in my React app. If I set a child's position to absolute and it's parent to relative.(Doesn't matter if using inline style or https://material-ui.com/customization/css-in-js/)
Then in Firefox it will show it as it should by css standards - A child positioned left right etc. relative to its direct parent but in chrome (Version 70.0.3538.77 ) it shows the child positioned relative to the body of document.
const DataTableFooter = ({totalCount, page, size, onChangePage, onChangeRowsPerPage}) => {
return (
<TableFooter>
<TableRow
style={{
position: 'relative',
}}>
<TablePagination
style={{
position: 'absolute',
bottom: 0,
right: 0,
}}
/>
</TableRow>
</TableFooter>
);
};
export default DataTableFooter;
Ironically plenty of the google searches about css absolute positioning errors I did came up with stories about how Firefox will not position the child relative to its parent in such situation and chrome does,(do I have an oppsoite day or hwat?) but with nothing useful.
I seem to have determined the problem. As is seen in the example code in my question I was dealing with tables and the react elements shown there will generate appropriate HTML TABLE elements. (Not divs styled as table etc but actual td tr etc.)
The table elements will not respond to position:relative in chrome as it is undefined in standard
https://www.w3.org/TR/CSS21/visuren.html#choose-position
' The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row, table-column-group,
table-column, table-cell, and table-caption elements is undefined. '
I was wondering...does anyone know if it's possible to add customized text on the inside of the a Material UI Circular Progress element? If so, what is the best way to do this? Thanks!
Material-UI is based on the Material Design spec by Google.
The spec for "Progress Activity" doesn't have text inside any of the circular elements. MUI is only going to officially support the material design spec.
If you take a look at the code for CircularProgress, then you can see that it is rendering a SVG element. (Also visible in dev tools in your browser.)
I suggest you fork MUI and fiddle with the Circular Progress element until you get what you want.
You can make the text absolute and place it on top of Progress bar.
<div style={{position: 'relative'}}>
<span style={{position: 'absolute', top: '10px', left: '2px'}}>100%</span>
<CircularProgress />
</div>
top and left values you can set as per you.
Add <Box/> with display: flex, justifyContent: center and alignItems: center. Also Add position: absolute to <Typography/>
<Box display='flex' justifyContent='center' alignItems='center'>
<CircularProgress/>
<Typography position='absolute'>{99}%</Typography>
</Box>
Like Mike pointed out, In Mui there is no built in support for adding text inside progressbar. Using css absolute property is an option ,but can have potential responsiveness issues. I suggest to use React-circular-progressbar as an alternative. It is responsive, but make sure you use it within some other parent element like Box/Paper or anything else of required size.