I'm trying to align these buttons with the divider, I used flex in the button component but I couldn't get a significant change.
image
my code:
Button Component
<Container style={{display: "flex", alignContent: "space-between"}}>
{socialIcons.map((social, index) => {
return (
<Link key={index} target={"_blank"} href={social.link}>
<ActionIcon size="xl" radius="xl" variant="default">
{social.icon}
</ActionIcon>
</Link>
);
})}
Main :
<div>
<Divider
style={{maxWidth: "80%",}}
labelPosition="center"
label="ou "
size="xs"
my="xs"
/>
<SocialFollow></SocialFollow>
</div>
I'm working on a react app and facing some issues with css.
This is my setup:
Router
class App extends Component {
render() {
return (
<HashRouter>
<Switch>
<Route element={<WithNavbar />}>
<Route path="/" element={<MainPage />} />
</Route>
<Route element={<WithoutNavbar />}></Route>
</Switch>
</HashRouter>
);
}
}
export default App;
With Navbar
export interface IWithNavbarProps {}
const WithNavbar: React.FunctionComponent<IWithNavbarProps> = (props) => {
return (
<>
<Navbar />
<div className="main">
<Outlet />
</div>
</>
);
};
export default WithNavbar;
Main Page
const MainPage: React.FunctionComponent<IMainPageProps> = (props) => {
return (
<div className="full-size">
<div className="half-size ">
</div>
</div>
);
};
export default MainPage;
the CSS
.main {
min-width: 100vh;
min-height: 94vh;
max-height: 94vh;
}
.full-size{
width: 100%;
height: 100%;
}
.half-size{
width: 50%;
height: 50%;
}
With the upper setup, for some reason, the div with half-size has a width/height of 0 (not visible at all).
if I apply following change to MainPage, half-size works kind of (div is visible 50% of screen height, is squared)
return (
<div style={{width: '100vh', height: '100vh' }} className="">
<div className="half-size ">
</div>
</div>
);
However, if I apply this change in MainPage, half-size does not work again
return (
<div className="main">
<div className="half-size ">
</div>
</div>
);
I don't understand this behaviour. Why does the reference to the grandparent not work? Why does inline style work? And why does the size setup of class main not work on MainPage level? (other properties such as background do work)
I'm trying to align and size a react component under a Navbar using react-bootstrap v0.33.1. I want the map to have the full width of the Navbar component and be centrally aligned beneath it. However, no matter how I place the component, it will do one of the following:
If I use the <Grid> and <Col> component to wrap the <Map> component, then the map is too far to the right.
export default function Map() {
return (
<Grid>
<Col md={12}>
<MapContainer />
</Col>
</Grid>
);
}
If I remove <Grid> and then I end up with the` component being the full width of my device screen.
export default function Map() {
return (
<MapContainer />
);
}
Here are the other components:
function MapContainer(props) {
const mapStyles = {
width: '100%',
height:'500px'
};
return (
<div>
<Map
google={props.google}
zoom={10}
// style={{
// width: "300px"
// }}
style={mapStyles}
initialCenter={{
lat: 47.6128856,
lng: -122.3631801
}}
/>
</div>
)
}
function App() {
return (
<div className="App container">
<Navbar fluid collapseOnSelect>
<Navbar.Header>
<Navbar.Brand>
<Link to="/">Skatespots</Link>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
{ isAuthenticated
? <NavItem onClick={handleLogout}>Logout</NavItem>
: <>
<LinkContainer to="/signup">
<NavItem>Signup</NavItem>
</LinkContainer>
<LinkContainer to="/login">
<NavItem>Login</NavItem>
</LinkContainer>
</>
}
</Nav>
</Navbar.Collapse>
</Navbar>
<AppContext.Provider value={{isAuthenticated, userHasAuthenticated}}>
<Routes />
</AppContext.Provider>
</div>
);
.App {
margin-top: 15px;
}
.App .navbar-brand {
font-weight: bold;
}
I do not know what the issue is and this simple issue is being such a pain. using a negative margin value seems like it'd be the wrong way to fix scenario 1 and using a fixed width with px seems like it wouldn't be dynamic for different screen sizes for scenario 2. Thanks.
I am starting to use React/Material-UI, and also new to CSS etc...
I have a simple page layout with an APPBar. Unfortunately this AppBar overlaps the elements which are meant to go below it.
I have found this answer:
AppBar Material UI questions
But this feels completely wrong. What if my AppBar has a variable height, depending on the icons, display modes etc...?
I have tried to create a vertical grid, to wrap the elements in different items, made the top container a flex one and play with flex settings, nothing seems to work, the app bar always sits on top of the text.
The code is very simple:
import React from 'react';
import { AppBar, Typography, Box } from '#material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
)
}
export default App;
The "Hello" text chunk is only half visible:
This is happening because the MaterialUI App Bar defaults to position="fixed". This separates it from the standard DOM's layout to allow content to scroll beneath it, but as a result no space is made for it on the page.
You can get around this by wrapping all content below it in a div and specifying enough margin, or by changing the position property of <AppBar> so it's no longer "fixed". In your example, you could also just apply the styles to <Box> if that's the only content below the <AppBar>.
e.g.
import React from 'react';
import { AppBar, Typography, Box } from '#material-ui/core';
function App() {
return (
<div>
<AppBar>
<Typography variant='h3'>
AppBar
</Typography>
</AppBar>
<div style={{marginTop: 80}}>
<Box>
<Typography variant='h1' style={{ border: '1px solid black' }}>
Hello
</Typography>
</Box>
</div>
</div>
)
}
export default App;
MaterialUI provides a theme mixin for the AppBar that can help. Not sure if you're using the recomended JSS setup, but you can do something like this:
import withStyles from '#material-ui/core/styles/withStyles';
const styles = theme => ({
appBarSpacer: theme.mixins.toolbar
});
const style = withStyles(styles)
function MyScreen ({ classes }) {
<AppBar></AppBar>
<div className={classes.appBarSpacer}></div>
<Box></Box>
}
export default style(MyScreen)
The mixin will give that div the same height as your AppBar, pushing down the other content.
According to Material-ui, there are 3 solutions to this problem.
https://material-ui.com/components/app-bar/#fixed-placement
You can use position="sticky" instead of fixed. ⚠️ sticky is not supported by IE 11.
You can render a second component
You can use theme.mixins.toolbar CSS
I personally enjoy using the 2nd solution like this.
return (
<>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />
</>
);
<AppBar position='static'>
use this it will do it and content won't hide under Appear
I think having a good app setup is opinianted, but I would recommend the following
import React from "react";
import ReactDOM from "react-dom";
import {
AppBar,
Typography,
Box,
CssBaseline,
makeStyles,
Container,
Grid,
Toolbar
} from "#material-ui/core";
const useStyles = makeStyles(theme => ({
content: {
flexGrow: 1,
height: "100vh",
overflow: "auto"
},
appBarSpacer: theme.mixins.toolbar,
title: {
flexGrow: 1
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4)
}
}));
function App() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="absolute">
<Toolbar className={classes.toolbar}>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
AppBar
</Typography>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<Container maxWidth="lg" className={classes.container}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Box>
<Typography variant="h1" style={{ border: "1px solid black" }}>
Hello
</Typography>
</Box>
</Grid>
</Grid>
</Container>
</main>
</div>
);
}
try this!
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
[theme.breakpoints.down('sm')]: {
marginBottom: 56,
},
[theme.breakpoints.up('sm')]: {
marginBottom: 64,
},
},
menuButton: {
marginRight: theme.spacing(1),
},
title: {
flexGrow: 1,
}, }))
You can add the above to your code like this
const Navbar = () => {
const classes = useStyles()
return (
<div className={classes.root}>
<AppBar position='fixed' color='primary'>
<Toolbar>
<IconButton
edge='start'
className={classes.menuButton}
color='inherit'
aria-label='menu'>
<MenuIcon />
</IconButton>
<Typography variant='h6' className={classes.title}>
News
</Typography>
<Button color='inherit'>Login</Button>
</Toolbar>
</AppBar>
</div>
)}
For more documentation visit material-ui breakpoint customization
This app bar's bottom margin settings are being ignored while other css rules are displaying correctly:
<AppBar
className={appBarContainer}
style={{marginBottom : 100}} // also doesn't work
>
<Typography
variant='h6'
>{setNavTitle(view)}</Typography>
<CloseIcon
onClick={() => setFullViewIsOpen(false)}
style={{ cursor : 'pointer' }}
/>
</AppBar>
// App Bar Styles
const defineJss = makeStyles(theme => ({
appBarContainer : {
padding : '10px 20px'
, display : 'flex'
, flexFlow : 'row nowrap'
, justifyContent : 'space-between'
, marginBottom : '100px !important' // removing !important doesn't help
, '& > *' : {
border : "2px dashed orange"
}
}
}));
The <AppBar /> is from a Material Ui React.js library. Margin top on the next element does work to push everything down but then creates a coupling issue. How can I get margin-bottom to work here?
Working Example
Here I have the issue shown in a style object: https://codesandbox.io/s/cool-heisenberg-jgt9l?fontsize=14
This is happening because you are using position="fixed" (this is the default position of AppBar).
When you render the app bar position fixed, the dimension of the
element doesn't impact the rest of the page. This can cause some part
of your content to be invisible, behind the app bar. Here are 3
possible solutions:
You can use position="sticky" instead of fixed. ⚠️ sticky is not
supported by IE 11.
You can render a second component:
function App() {
return (
<React.Fragment>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<Toolbar />
</React.Fragment>
);
}
You can use theme.mixins.toolbar CSS:
const useStyles = makeStyles(theme => ({
offset: theme.mixins.toolbar,
}))
function App() {
const classes = useStyles();
return (
<React.Fragment>
<AppBar position="fixed">
<Toolbar>{/* content */}</Toolbar>
</AppBar>
<div className={classes.offset} />
</React.Fragment>
)
};
In my opinion, the best solution for you is add a separator div, and set it's marginBottom to theme.mixins.toolbar :
function App(props) {
const classes = useStyles(props);
return (
<div className="App">
<AppBar
position="fixed"
className={classes.appBarContainer}
>
Placeholder Text
</AppBar>
<div className={classes.appBarSeparator} />
<p>Exterior Text</p>
</div>
);
}
const useStyles = makeStyles(theme => ({
appBarContainer : {
offset: theme.mixins.toolbar,
padding : '10px 20px',
marginBottom:'200px !important'
, display : 'flex'
, flexFlow : 'row nowrap'
, justifyContent : 'space-between'
, '& > *' : {
border : "2px dashed orange"
}
},
appBarSeparator: theme.mixins.toolbar
}));