React material-ui responsive layout
16,887
I made a complete example for it and it is totally responsive here in codesandbox
you should put your main pages on a box like this :
<Box
component="main"
sx={{ flexGrow: 1 }}
className={classes.content}
style={{ width: "calc(100% - 240px)" }}
>
<TextField
hintText="Hint goes here"
floatingLabelText="Enter your Note here..."
multiLine={true}
fullWidth={true}
rows={2}
/>
</Box>
this topic is bigger than I could write all code here.
Related videos on Youtube
Author by
jbambrough
Updated on July 24, 2022Comments
-
jbambrough almost 2 years
I am trying to use material-ui in my React application. The components are great, but it doesn't seem like they were designed to be responsive. For example, I'm trying to implement the Drawer component in my home page like this:
<div> <AppBar title="My App" iconClassNameRight="muidocs-icon-navigation-expand-more" onLeftIconButtonTouchTap={this.handleToggle} /> <TextField hintText="Hint goes here" floatingLabelText="Enter your Note here..." multiLine={true} fullWidth={true} rows={2} /> <Drawer docked={false} open={this.state.open} onRequestChange={(open) => this.setState({open})} > <MenuItem>One</MenuItem > <MenuItem>Two</MenuItem > </Drawer> </div> );
When I load this up on my phone, it doesn't adjust it's size as I had hoped. Is there any way to make this responsive using only material-ui? If not, is there any way I can use Bootstrap or some other package for responsiveness?
Thanks, -Jim
-
oklas almost 7 yearsSo this is happiness that there is not bootstrap. Let it be known to you that responsiveness is achieved through css and js (rather than bootstrap)
-