I started with the clipped drawer sample code and tried to build around it. When inserting components inside the sample (i.e., replacing '{'You think water moves fast? You should see ice.'} with other content), the content is constrained by the height of the drawer. When trying to insert content outside of the sample , everything starts below the drawer.
Expected Behavior: ability to place content anywhere around the drawer. I've got different components hiding/becoming visible based on drawer menu selections
I originally started with the permanent drawer example and everything worked just fine except I need the drawer positioned below the app bar.
The layout consists of a flex container that contains the Drawer and main content area. The content area (.appContent) expands to fill the space to the right (or left) of the drawer. All of your content should be placed inside this element.
Updated: Fixed styles to work on IE 11
The basic structure:
<div className={classes.root}>
<AppBar position="fixed" className={classes.appBar} />
<Drawer
variant="permanent"
className={classes.drawer}
classes={{ paper: classes.drawerPaper }}
/>
<main className={classes.appContent}>
{/* Page content goes here */}
</main>
</div>
The styles
const styles = theme => ({
// The main flex container for the app's layout. Its min-height
// is set to `100vh` so it always fill the height of the screen.
root: {
display: "flex",
minHeight: "100vh",
zIndex: 1,
position: "relative",
overflow: "hidden",
},
appBar: {
zIndex: theme.zIndex.drawer + 1
},
// Styles for the root `div` element in the `Drawer` component.
drawer: {
width: theme.layout.drawerWidth
},
// Styles for the `Paper` component rendered by `Drawer`.
drawerPaper: {
width: "inherit",
paddingTop: 64 // equal to AppBar height (on desktop)
},
// Styles for the content area. It fills the available space
// in the flex container to the right (or left) of the drawer.
appContent: theme.mixins.gutters({
// https://github.com/philipwalton/flexbugs#flexbug-17
flex: '1 1 100%', // Updated to fix IE 11 issue
maxWidth: "100%",
paddingTop: 80, // equal to AppBar height + 16px
margin: '0 auto',
// Set the max content width for large screens
[theme.breakpoints.up('lg')]: {
maxWidth: theme.breakpoints.values.lg,
},
})
Live Examples (codesandbox)
Permanent Drawer - clipped below appbar
Permanent Drawer - full height
Related
I need to render an image in several different image widgets, just like this photo:
And add them to a column Widget. I have a restriction that each widget must not be taller than 120px. I have tried SizedOverflowBox with ClipRect, and SizedBox but didn't work.
This is how I'd doing using CSS (Obviously with some JS to generate dynamic DIVs and all the bells and whistles):
#top, #bottom {
width: 240px;
height: 120px;
background-image: url("/img/cat.jpeg");
}
#top {
background-position: 0 0;
}
#bottom {
background-position: 0 -120px;
}
That would generate something like this:
I haven't found any widget combination that allows me to do it.
Try using a Stack widget (https://youtu.be/liEGSeD3Zt8). You can layer widgets on the z-axis using it. Then, add 2 children widgets to it where each is wrapped inside a Positioned widget (https://youtu.be/EgtPleVwxBQ). This will allow you to move the 2 children relative to each other in the Stack.
I want to implement a dashboard that has 2 widgets: a menu panel and a panel where information is displayed.
I also want that if you click the top left button, the panel would collapse and the information panel would be 100% of the screen's width.
How can I resize a widget on button click?
Wrap you sidebar with an AnimatedContainer. Then, set the width property on that container to width: isExpanded ? 200 : 0, where isExpanded is a bool that specifies whether or not the sidebar should be expanded, and 200 is the width that you want the sidebar to be when expanded.
To toggle the sidebar to be expanded or not, simply call this:
setState(() { isExpanded = !isExpanded; });
How can I have a Grid container with auto width? I want to my grid fit it's content
https://codesandbox.io/s/material-demo-forked-78uld
I want to keep red box as minimum as possible
Ciao, you could set width: "fit-content" in container class in this way:
container: {
backgroundColor: "red",
width: "fit-content"
}
Here your codesandbox modified.
I want to have a line that has 100% parent height, the line should has a fluid height following it's parent's height. the parent's height would be dynamic because every content has it's own height. Just like in Path app.
This is my app, currently I'm setting the height as a constant, how to make it dynamic following it's parent's height? :
Container(
width: 1,
color: Colors. redAccent,
height: 300, // <-- this height
)
try to use the Expanded Widget which uses the available space. you just have to definewhat is the available space here
Expanded(
child: Container(
color: Colors.amber,
width: 100,
),
),
here, if you dont put something on top of the expanded, it will take all the screen
and if not on the bottom, it will reach the bottom of the screen.
it takes the whole free space.
I solved this by adding container and add border left :)
I want the material UI to stay the same width it is before an item is selected. (How the Lab Autocomplete works).
For example if you select the 3rd option here, it will grow, how do I disable that?
https://codesandbox.io/s/material-demo-i4ckf
Instead I would like it to act like the autocomplete does, (Choose Lord of the rings)
https://codesandbox.io/s/kcq04
Instead of using minWidth just set the exact width that you need:
formControl: {
margin: theme.spacing(1),
width: 120
}
You've given minWidth property, usually in flex layouts if there's no restriction like maxWidth or flexGrow:0 then it will occupy as much space as available
you can set a fixed width for it like below
also to add text overflow add the necessary css below
formControl: {
margin: theme.spacing(1),
width: 120,
// ellipsis overflow
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis"
}
here's the link https://wsh90.csb.app/
Edit as pointed by Dekel,
Overflow part is may not be necessary