const Navigation =()=>{
return (
<>
<Menu mode={"horizontal"} style={{
display: 'flex',
justifyContent: 'space-around'}} theme={"light"}>
<Menu.Item key={"home"} >
홈
</Menu.Item>
<Menu.Item key={"message"}>
쪽지
</Menu.Item>
<Menu.Item key={"post"}>
게시판
</Menu.Item>
<Menu.Item key={"homepage"}>
홈페이지
</Menu.Item>
</Menu>
</>
)}
I use react js and antd.
I want to give the items Menu.Item justify-content as space-around. But it doesn't work like the picture. What should I do?
Menu.Item should be spaced evenly, but it doesn't.
you can just set the width of each Menu.Item to 25% and remove the styles from Menu.
but changing this is not a good idea i think, as it will break some menu behavior of antd. maybe leading to some unexpected behaviour.
const Navigation =()=>{
return (
<>
<Menu mode={"horizontal"} theme={"light"}>
<Menu.Item key={"home"} style={{ width: '25%' }}>
홈
</Menu.Item>
<Menu.Item key={"message"} style={{ width: '25%' }}>
쪽지
</Menu.Item>
<Menu.Item key={"post"} style={{ width: '25%' }}>
게시판
</Menu.Item>
<Menu.Item key={"homepage"} style={{ width: '25%' }}>
홈페이지
</Menu.Item>
</Menu>
</>
)}
Related
I have a main component
return (
<>
<NavBar />
<Container style={{marginTop: '7em'}}>
<List>
{accounts.map(account => (
<List.Item key={account.id}>
{account.id}
</List.Item>
))}
</List>
</Container>
</>
);
That contains a NavBar
import React from 'react';
import { Container, Icon, Menu } from 'semantic-ui-react';
export default function NavBar() {
return (
<Menu inverted fixed='top' stackable>
<Container>
<Menu.Item header>
<Icon name='chess pawn' size='large' />
Menu 1
</Menu.Item>
<Menu.Item name='Menu 2' />
<Menu.Item name='Menu 3' />
<Menu.Item name='Menu 4' />
<Menu.Item name='Menu 5' />
</Container>
</Menu>
)
}
This looks alright on desktop
but on mobile resolutions when the Menu stacks and some content goes behind it.
Is there any elegant way to address this issue?
In semantic-ui, when using fixed='top' on Menu, it is taken out of the flow of document due to position: fixed, which allows other content to go under it.
It is also the reason why a higher marginTop was needed on the content container to create some space on top.
Instead of fixed='top', try use a custom class (or inline style) for NavBar to apply position: sticky on it, so it is placed considering the flow but still stays in view as the window scrolls.
More about position: sticky
Live demo of the minimized example: stackblitz
Example:
.custom-nav {
position: sticky;
top: 0;
}
Add the className to NavBar:
import React from 'react';
import { Container, Icon, Menu } from 'semantic-ui-react';
export default function NavBar() {
return (
<Menu inverted stackable className="custom-nav">
<Container>
<Menu.Item header>
<Icon name='chess pawn' size='large' />
Menu 1
</Menu.Item>
<Menu.Item name='Menu 2' />
<Menu.Item name='Menu 3' />
<Menu.Item name='Menu 4' />
<Menu.Item name='Menu 5' />
</Container>
</Menu>
)
}
Alternatively, perhaps a sticky component by semantic-ui can be used to wrap NavBar for the same result, although it seems that it would result in an additional wrapper in the structure.
Hope this will help.
I am using the MUI V5 in a react project and I am trying to center the logo in an AppBar on extra small screens but no mattter what I do nothing seems to be working. The Typography comonent is wrapped inside a ToolBar wrapped inside an AppBar that only appears on xs screens.
Here's my current code.
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: 'flex', sm: 'none' },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: 'gray',
}}
>
<Toolbar >
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
sx={{ mr: 2, display: { sm: 'none' } }}
>
<MenuIcon />
</IconButton>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
flexGrow: 1,
bgcolor: 'red',
display: { xs: 'flex', sm: 'none' },
flexGrow: 1,
fontFamily: 'monospace',
fontWeight: 700,
letterSpacing: '.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
LOGO
</Typography>
</Toolbar>
</AppBar>
I have throw everything I can at it but nothing seems to work. Any help is highly appreaciated.
Best Way to handle spacing with MUI is using Grid component.
Your code would be like this:
return (
<Box sx={{ display: "flex" }}>
<CssBaseline />
<AppBar
elevation={0}
position="fixed"
sx={{
display: { xs: "flex", sm: "none" },
width: { sm: `calc(100% - ${drawerWidth}px)` },
ml: { sm: `${drawerWidth}px` },
bgcolor: "gray",
}}
>
<Toolbar>
<Grid
container
spacing={1}
sx={{ alignItems: "center", justifyContent: "space-between" }}
>
<Grid item xs={4} sx={{ textAlign: "start" }}>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
// onClick={handleDrawerToggle}
sx={{ mr: 2 }}
>
<MenuIcon />
</IconButton>
</Grid>
<Grid item xs sx={{ textAlign: "center" }}>
<Typography
variant="h5"
noWrap
component="a"
href=""
sx={{
bgcolor: "red",
fontFamily: "monospace",
fontWeight: 700,
letterSpacing: ".3rem",
color: "inherit",
textDecoration: "none",
}}
>
LOGO
</Typography>
</Grid>
<Grid item xs={4}></Grid>
</Grid>
</Toolbar>
</AppBar>
</Box>
);
MUI Grid docs
Not a big expert in MUI, but try defining the flex direction, then define the align items or justify content to be centre depending on the direction.
I'm attempting to keep the icon button center aligned, but something isn't working right. Adding left: "0.5rem" to sx prop is pushing the button icon further. I'm trying not to use makeStyles to override the position. Any tip/direction would be helpful :)
Sandbox link
You can try using style:
<Stack direction="row" style={{display:"flex", justifyContent:"center", alignItems:"center"}}>
<Tooltip title="Delete">
<Button sx={{ minWidth: 0 }} startIcon={<DeleteIcon />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
<Tooltip title="Send">
<Button sx={{ minWidth: 0 }} startIcon={<SendIcon />} />
</Tooltip>
<Tooltip title="Headset">
<Button sx={{ minWidth: 0 }} startIcon={<HeadsetMicOutlined />} />
</Tooltip>
<Divider orientation="vertical" flexItem />
</Stack>
In case you want to set it in you theme here is how you can do it so you don't have to do it in every Button component.
export const theme = createTheme({
...
components: {
MuiButton: {
styleOverrides: {
startIcon: {
margin: '0'
},
},
}
},
});
I have a MenuItem in my Dialog2 in my React app. I have a problem displaying the MenuItem. I already put a zIndex: 1900 that is higher than the two dialogs. How come it doesn't appear on the front. It is hiding still on the back of the dialogs?
Pls check my codesandbox here:
CLICK HERE
<DialogContent style={{ width: 300 }}>
<TextField variant="outlined" select label="Gender" fullWidth>
{genders.map((gender, index) => (
<MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
{gender}
</MenuItem>
))}
</TextField>
</DialogContent>
You've to target the Menu popover z-index
const useStyles = makeStyles({
customMenuPopover: {
// take note of !important because default z-index is applied inline
zIndex: "1900 !important"
}
});
<TextField
SelectProps={{
MenuProps: {
PopoverClasses: {
root: classes.customMenuPopover
}
}
}}
variant="outlined"
select
label="Gender"
fullWidth
>
{genders.map((gender, index) => (
<MenuItem key={index} value={gender} style={{ zIndex: 1900 }}>
{gender}
</MenuItem>
))}
</TextField>
I am using MUI with React and I have a <Paper> element which wraps a <Grid> with 3 children elements. When setting the overflowY property of the bottom grid item to "auto", when the content becomes too big, the scroll bar doesn't show up but it breaks the parent container. This is my code:
<Paper
elevation={0}
style={{
height: "776px",
width: 342,
overflowY: "hidden"
}}
>
<Grid
container={true}
direction="column"
style={{ overflowY: "hidden" }}
>
{
<Grid
container={true}
item={true}
style={{
flexGrow: 1,
padding: "16px",
width: "100%",
flexWrap: "nowrap",
position: "sticky",
top: 0
}}
>
{props.pageTitle && (
<Grid item={true} style={{ marginTop: 6 }}>
{!filterOpen && (
<Typography variant="h6">
<span
style={{
paddingLeft: 8
}}
>
{props.pageTitle}
</span>
</Typography>
)}
</Grid>
)}
{props.allowFilter && (
<Grid justify={"flex-end"} container={true} item={true}>
<FmsFilterBox
filterText={filterText}
onChange={setFilterText}
cssFilterBoxWidth="100%"
onFilterOpenChanged={setFilterOpen}
/>
</Grid>
)}
</Grid>
}
<Grid item={true} style={{ flexGrow: 1 }}>
<Divider style={{ width: "100%" }} />
</Grid>
<Grid
item={true}
style={{
flexGrow: 1,
overflowY: "auto"
}}
>
{props.children(filteredData)}
</Grid>
</Grid>
</Paper>
I tried everything but I can't get the scroll bar appear for the 3rd (bottom) grid item (the one rendering {props.children(filteredData)} which is a list with list items fetched from the back end).
If I remove the overflowY: "hidden" from the <Paper>, the content of the 3rd gets hidden, but still no scroll bar - please see the photos attached.
I am really out of ideas, did anyone have this issue before? Thank you.
Fixed it. Apparently I had to add a height of 100% to the upper most grid (main container) and a flex-wrap of "no-wrap".