I would like my tab buttons to spread out across the entire screen.
When the screen width is too skinny to fit all the tabs, I would like the scroll buttons to show up.
MaterialUI has variant='scrollable' and the variant='fullWidth'. It does not appear to allow both of these to be used at the same time.
If I use the property scrollButtons='auto' in combination with variant='fullWidth' I don't get scroll buttons when things get to skinny.
Is there a mechanism for letting this work? Centering the buttons mitigates the issue somewhat, but isn't the real answer.
I know this question has been asked a while ago but in case someone would wonder, here is what I did:
import { Tabs, Tab } from '#mui/material'
<Tabs {...propsTabs} variant="scrollable">
<Tab {...propsTab1} sx={{ minWidth: "fit-content", flex: 1 }} />
<Tab {...propsTab2} sx={{ minWidth: "fit-content", flex: 1 }} />
{/*...*/}
</Tabs>
The MUI Tabs component has a { display: "flex" } property.
Related
Good evening,
I am looking for a better way to display what you see in the picture. With the CardHeader this is all not centered and I can't use any useState methods.
how it should look
<Card sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<CardHeader avatar={<Avatar sx={{ bgcolor: red[500] }} aria-label="logo">N</Avatar>} action={<IconButton aria-label="enable"><FavoriteBorderIcon /></IconButton>} title="Netflix" subheader="netflix.com" />
</Card>
The way it looks here is how I want it to look in the end, but I can't useState methods here. Also the content (e.g. the icon) is not centered vertically.
I dont know why there is a problem with useState hook. Feel free to add it to the and depending on the state switch between normal and red icon.
https://codesandbox.io/s/distracted-oskar-1h7xmj?file=/src/App.js
I'm trying to create a landing page in MUI v5 where half of the page is an image and the second part of the page is a form to login. I want the image and form to always fill the page completely with no scroll.
However, when doing so, it seems that MUI root is always affecting the margin so that the view has a horizontal scroll and there is white space on the left-hand side (See example below - and ignore the silly image):
How the page should look (and what it looks like if I scroll to the right):
How the page should look when I load it before scrolling:
I've spent hours trying to edit the CSS and figuring out where this is coming from with no luck. There is probably a better way to format this but I am using Grid and have tried Box with no luck.
My source code looks something like:
import React from "react";
import PropTypes from "prop-types";
import Grid from "#mui/material/Grid/Grid";
import Box from "#mui/material/Box";
import Paper from "#mui/material/Paper";
import SomeComponent from "...{some_path}...";
import SomeFormComponent from "...{some_path}...";
const SomeComponent = ({children, title, width}) => {
return (
<Grid container disableGutters sx={{height: "100vh", width: "100vw"}}>
<Grid
item
xs={false}
sm={4}
md={7}
sx={{
backgroundImage: `url(${SomeImage})`,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
<Box
sx={{
my: 8,
mx: 4,
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<SomeFormComponent width={width} title={title}>
{children}
</SomeFormComponent>
</Box>
</Grid>
</Grid>
);
};
Also, inspecting the page elements, I've identified the padding and margin come from a class called css-ayh9c9-MuiGrid-root which seems to be causing this because if I remove the class from the parent, everything works as expected. However, this is being added by MUI behind the scenes because it is nowhere in my source code.
Any help would be greatly appreciated!
I prefer Box whenever possible because Grid does some funky stuff with margins. In this case you can use the flex attribute on the children to get the right proportions. here is a working example https://codesandbox.io/s/material-demo-forked-rur3t?file=/App.tsx
I wanted to scroll back up to the first element in the List when a user clicks pagination buttons.
So far I come across scrollToRow and scrollToIndex and both of them didn't work.
Here's my current code:
<AutoSizer disableWidth>
{({ height }) => (
<div>
<List
ref="list"
height={height}
rowCount={this.state.items.length}
rowHeight={115}
rowRenderer={this._rowRenderer}
width={1}
scrollToRow={0}
containerStyle={{
width: '100%',
maxWidth: '100%',
}}
style={{
width: '100%',
marginBottom: '10px',
}}
/>
</div>
)}
</AutoSizer>
After a little bit of thinking, I found out that there's no need to use react-virtualized package anymore. Since I refactored the list to make use of SSR pagination showing 24 items at a time. So, it was an overkill.
Anyway, I just reused the same _rowRenderer() function to map items into a list. To achieve the scrolling behavior I just added the styling prop of "overflow: scroll".
Thats all.
I am using Material-UI React Drawer. Is there a way I can have the drawer confined to a specific section of my page instead of occupying the entire window? I have tried giving the root component an absolute position instead of fixed but this does not change the placement of the drawer.
<div className="confirmation-drawer">
<Drawer
anchor="top"
open={state.top}
onClose={toggleDrawer('top', false)}>
<!-- Drawer content goes here -->
</Drawer>
</div>
I need the drawer inside the .confirmation-drawer div and not the entire page. Any help would be highly appreciated.
The code below worked for me. It uses the preferred one-off styling method in the MUI docs. Transitions work without any additional tweaks. Of course make sure you have a 'relative' element up in the DOM tree.
<Drawer
sx={{
'& .MuiDrawer-root': {
position: 'absolute'
},
'& .MuiPaper-root': {
position: 'absolute'
},
}}
>
</Drawer>
what #Jon Deavers said is true, though there is a workaround. you can find the z-index of the drawer overlay (1300 in may case) and set a higher z-index to the component you wish to be on top. then just set paddings inside the drawer so all it's content is visible.
as i said its merely a workaround but i hope it helps somebody.
try this:
import {styled, Drawer as MuiDrawer} from '#mui/material'
const Drawer = styled(MuiDrawer)({
position: "relative", //imp
width: 240, //drawer width
"& .MuiDrawer-paper": {
width: 240, //drawer width
position: "absolute", //imp
transition: "none !important"
}
})
If you want transitions then use collapse.
<Collapse orientation='horizontal' in={open} >
<Box> ... </Box>
</Collapse>
The Drawer component is a nav menu component that is designed to overlay the application and not to be nested inside a container. It will always appear over your other content.
If you are looking to have a dynamic element in which you can hide information and other interactive components you may want to take a look at the Accordion component from MUI.
https://material-ui.com/api/accordion/
That will allow you to have a small "drawer"-like element that other components can be hidden inside of.
Using material-ui and react/jsx, I have an AppBar. I wanted to add a notifications menu icon with badge (number) on it, that is, to show the number of new notifications.
The problem is that the badge will be displayed incorrectly. That is, with weird styles and look.
Here is what I have already tried
<AppBar>
<IconMenu anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
targetOrigin={{ horizontal: 'right', vertical: 'bottom' }}
iconButtonElement={
<FlatButton label={<Badge badgeContent={5} />} icon={<NotificationsIcon />} />
}
/>
</AppBar>
That way, the badge will not be aligned correctly with the bell (notifications) icon.
I have also tried making the IconMenu part of the AppBar's iconElementRight property to no avail.
Any help?
You're right - it does seem to take some experimenting with the proper nesting order, and even then you have to tweak the style a bit. But, here's a sample webpackbin that I think looks decent without being hacky: http://www.webpackbin.com/EJqz0NVzM
<AppBar>
<IconMenu
iconButtonElement={
<IconButton style={{ padding: 0 }}>
<Badge
badgeStyle={{ top: 12, right: 12, backgroundColor: colors.yellow800 }}
badgeContent={5}
secondary={true}
>
<NotificationIcon color={muiTheme.appBar.textColor} />
</Badge>
</IconButton>
}
>
<MenuItem primaryText="View Notifications" />
<MenuItem primaryText="Dismiss All" />
</IconMenu>
</AppBar>
Once you nest the components correctly, the final bit is setting the padding on the IconButton to zero. Once you do this, it will look as expected according to the material-ui docs.
In this configuration, in my humble opinion, the badge is floating a little too far away from the notification icon. So, I also added a custom "badgeStyle" to nudge the badge inward to overlay on top of the notification icon slightly. I also put a custom yellow color on the badge too, just to illustrate that you can further customize the look of that badge (could change borderRadius, boxShadow, fontSize, etc)