Develop Reference

Footer to the bottom of the screen without having a 100vh set material ui

I am building react app with MUI framework and I have tried many different solutions to get a sticky footer to the bottom of my screen but none of them satisfied what I wanted. The one I am the most satisfied is the following:
export default function Footer() {
return (
<Box
sx={{
display: 'flex',
flexDirection: 'column',
width:'100%',
overflow:'hidden',
bottom:'0',
left:'0',
}}
>
<CssBaseline />
<Box
component="footer"
sx={{
py: 3,
px: 2,
mt: 'auto',
backgroundColor: (theme) =>
theme.palette.mode === 'light'
? theme.palette.grey[200]
: theme.palette.grey[800],
}}
>
<Container maxWidth="sm">
<Typography variant="body1">
Add stuff here
</Typography>
<Copyright />
</Container>
</Box>
</Box>
);
}
The problem with this is that if there is not enough content on the page then the footer will be at the middle of the page. One work around was to add to the footer component min-height:100vh but it is a problem because it leaves a big blank above the footer when there is enough content this time.
Is there a way to do this so it does not get stuck in the middle neither I have a big white space if it's at the bottom?
I call my footer in my app.js component
function App() {
return (
<>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path='/login' element={<Login />} />
<Route path="/test" element={<Test />} />
<Route path="/private" element={<Private />}>
<Route path="/private/private-home" element={<PrivateHome />} />
<Route path="/private/dashboard" element={<Dashboard />} />
</Route>
</Routes>
<Footer />
</>
);
}
export default App;

Here's a quick example of how I accomplish this in raw HTML/CSS. Note the body should have margin:0; on it so you don't get double scroll bars, but it'll keep the footer at the bottom of the page & make the content section scroll independently.
Hope it helps!
<div style="display:flex; height:100vh; overflow:hidden; flex-direction: column;">
<div style="flex-grow:1; overflow:auto; background-color:red;">
Body Content
</div>
<div style="min-height: 90px; height: 90px; background-color:green;">
Footer content
</div>
</div>

How do I resize and svg logo in react gatsby?

I have been trying to resize this logo without making the container itself larger. I'm completely stuck and dont know what to do. Modifying the logo svg file with inline styling
<svg viewBox="0 0 493.19 493.19" width='400'height='400'> produces the above result. I just want to make the logo bigger without pushing down all the components under it. I will post the layout code itself, if that will make things easier to help me out. Thank you!
const data: QueryResult = useStaticQuery(query)
return (
<ThemeProvider theme={theme}>
<>
<GlobalStyles />
<Wrapper>
<SideBarInner bg={color} as="aside" p={[6, 6, 8]}>
<Flex
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems={['center', 'center', 'center', 'flex-start']}
justifyContent="space-between"
>
<Box width={['3rem', '4rem', '5rem', '8rem']}>
<Link to="/" aria-label="LekoArts, Back to Home">
<Logo />
</Link>
</Box>
<Nav
color={color}
mt={[0, 0, 0, 10]}
as="nav"
flexWrap="nowrap"
flexDirection={['row', 'row', 'row', 'column']}
alignItems="flex-start"
>
{data.navigation.nodes.map((item) => (
<PartialNavLink to={item.link} key={item.name}>
{item.name}
</PartialNavLink>
))}
</Nav>
</Flex>
</SideBarInner>
<Main>{children}</Main>
<Footer color={color}>
<Box p={[6, 6, 8]} fontSize={0}>
little things with love LekoArts.<br />
Source.
</Box>
</Footer>
</Wrapper>
</>
</ThemeProvider>
)
}
export default Layout```

The SVG viewBox dimensions don't change the size of the paths in the SVG, they change the size of the SVG object that contains the paths which results with that extra white-space.
I would undo the changes you made to the viewBox and remove the width and height inline styles. Then, the SVG should resize automatically to fit the container that it is in.

Try setting the width to 100% in the svg code and then control the size of svg with CSS (however you are implmenting css) by adjusting the width of the container that holds the svg.
Something like:
.sl-container {
width: 4rem;
}
EDIT:
If you need help implementing the css you can find a good explanation of numerous implmentations here. Inline styling is probably the simplest way to do it.
<Logo style="width: 4rem;" />

How to style {Switch} component from react-router-dom? I tried wrapping it with <div> and does not work

I have this code below and tried to change the map component styling. However, it looks like it is from Switch component. How can i make the screen fit into 'root' element here? I used or container from MUI and other things to adjust the size but none of them work.
<MainWrapper>
<Visible when={isLogged}>
<LeftPanel />
</Visible>
<div style={{width: '100%'}}>
<Visible when={isLogged}>
<Navbar />
</Visible>
<div style={{height: '100hv'}}>
<Switch>
<PrivateRouter
path='/map'
component={MapPage}
isLogged={isLogged}
redirectTo={'/login'}
/>
<PrivateRouter
path='/profile'
component={UserProfile}
isLogged={isLogged}
redirectTo={'/login'}
/>
<PrivateRouter
path='/login'
component={Login}
isLogged={!isLogged}
redirectTo={'/map'}
/>
<PrivateRouter
path='/registration'
component={Registration}
isLogged={!isLogged}
redirectTo={'/map'}
/>
<PrivateRouter
path='/'
component={{}}
isLogged={false}
redirectTo={'/login'}
/>
</Switch>
</div>
</div>
</MainWrapper>
);
}
}
const MainWrapper = styled.div`
height: 100vh;
display: flex;
`;

It could be related to a type:
<div style={{height: '100hv'}}>
it should be vh (as viewport height) instead of hv:
<div style={{height: '100vh'}}>
since you're using MainWrapper as flex-box the issue may be solved if you set flex: 1 for child div:
<div style={{height: '100hv', flex: 1}}>
flex: 1 means fit the parent.

Load dynamic content at the bottom of a div

I've connected to a websocket and pull real-time data from the server once the page is loaded. However, I want it to load from the bottom-up and not from the top-down of the div. I'm hoping I can keep it scrolled to the bottom of the div unless the user scrolls up in this case.
Here's what I'm currently working with
(I'm planning to also pull more data from their REST API and preload the div with 100-50 messages prior so the user doesn't see nothing upon the initial page load. Though, I'm sure that'll be another question 😂)
I've tried using
display: 'flex', flexDirection: 'column-reverse'
but that alone doesn't seem to be the solution in this case. overflow? I'm not sure
Here is the parent .js file that the component is within:
<Layout style={{ minHeight: '100vh' }}>
<div style={{width: '100%', height: '100%'}}>
<Header id="header">
</Header>
<Content style={{ padding: '24px 50px 0px 50px' }}>
<div style={{ borderRadius: '6px', border: '1px solid rgb(235, 237, 240)', background: '#fff'}}>
<Tbox/>
</div>
</Content>
<Footer/>
</div>
</Layout>
And then here is the component itself:
render() {
const chatBox =
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item >
<List.Item.Meta
avatar={<Avatar size="large" icon="user" />}
title={<div>{item.user} {item.date}</div>}
description={item.message}
/>
</List.Item>
)}
/>;
return (
<div>
<div style={{ height: 400 }}>
<Scrollbars style={{ height: 400 }}>
<section style={{display: 'flex !important', flexDirection: 'columnReverse !important' }}>
<div>
{chatBox}
</div>
</section>
</Scrollbars>
</div>
<div style={{ width: '100%', padding: 0 }}>
...
</div>
</div>
);
}

As mentioned before by Daan, if you can post the result page, it would help since after that the CSS rule can be applied to the result list. Take look at this
how-to-display-a-reverse-ordered-list-in-html
Hope this could help

how to set min height in semantic-ui react

i using the semantic-ui-react. I have a Container main which has an Segment inside for show page details. but this Segment's height is changing according content inside. i want to set an mix height to alway stay fixed size. here is my code:
class App extends Component {
render() {
return (
<div className="App">
<Container>
<Header />
<Segment />
</Container>
</div>
);
}
}

You can set minHeight style/css on your component or any div inside :
<Segment style={{ minHeight: 15 }} />