Here when i am in my homepage the background renders just fine
It completely covers everything (except navbar which is expected)
What Breaks the css
I recieve and render alot of images in my page after making an API call
So the div does not expand to cover the whole background but its height is the same as in the beginning basically an overflow occurs
I do NOT want an additional scrollbar by setting overflow as scroll
What i want to achieve
I want to tell my div somehow to react to the new rendered items and expand accordingly.
Note
Setting height:auto; width:auto; doesn't work either as it breaks some of my other UI components.
App.css
.App {
background: grey;
height: 100%;
position: absolute;
left: 0;
width: 100%;
}
App.js
import React from 'react';
import './App.css';
import Navbar from './components/UI/Navbar/Navbar'
import Body from './containers/Body/Body'
function App() {
return (
<React.Fragment>
<Navbar />
<div className = "App">
<Body />
</div>
</React.Fragment>
);
}
export default App;
Are you sure your div.App got re-render for each image
some how repaint is skipped for some pure dom element.
If you are sure about this thing,
Try to put a wrapper (let's say another div) instead of React.Fragment
and set its display to flex with flex-direction: column;
then put flex-grow: 1 to your div.App and flex-shrink: 0; to your Navbar (if your dom structure cause shrinking)
.Wrapper {
display: flex;
flex-direction: column;
/* set layout viewport to anything that works for you*/
height: 100%
}
.App {
background: grey;
flex-grow: 1;
width: 100%;
/* this part can be based on you layout or replaced with flex-basis instead */
height: 100%;
}
import React from 'react';
import './App.css';
import Navbar from './components/UI/Navbar/Navbar'
import Body from './containers/Body/Body'
function App() {
return (
<div className="Wrapper">
<Navbar style={{ flexShrink: 0 }}/>
<div
className="App"
key="Set to src of image if you want to force re-render for each image"
>
<Body />
</div>
</div>
);
}
export default App;
Related
I have left and right sidebar, then i intended to make some sort of content right at the center of it.
But when i make a new js file and define some styling width for it, i realize that my main content width just ignore the width of both the sidebar and go underneath it.
So my question is, how can i make the main content only have width based on the remaining space of the page?
Router:
import React from 'react'
import LeftSidebar from './components/sidebar/LeftSidebar'
import Main from './Pages/Main'
import RightSidebar from './components/sidebar/RightSidebar'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import "../src/styles/global.css"
const App = () => {
return (
<BrowserRouter>
<>
<LeftSidebar />
<RightSidebar />
<Routes>
<Route path='/' element={<Main />}/>
</Routes>
</>
</BrowserRouter>
)
}
export default App
Main Content js file:
import React from 'react'
import SearchBox from '../components/search/Search'
import Styles from "../../src/styles/Main.module.css"
const Main = () => {
return (
<div className={Styles.mainSection}>
<SearchBox />
</div>
)
}
export default Main
Main Content css file:
.mainSection {
width: auto;
background-color: #1e1e1e;
height: 100vh;
overflow-x: hidden;
}
I want the main content only have width of the remaining space in my page
on your main section you have:
height: 100vh;
that means 100% of the height.
So u can do something similar with the width:
for your sidebar:
width: 20vw;
then, for your main:
width: 80vw;
and problem solved
Try display: flex for parent component then play with flex-shrink or flex-grow. To set width use percents then vw (100vw is sometimes wider than the viewable area (because scrollbars))
I'm working on a web-app where the layout is the next :
A left-side navigation menu
A right-side body for content
My problem is that even though both sides height: 100% when content is added to the right-side, the left one doesn't expand !
I illustrated my scenario with this photo to explain more what's happening.
[UPDATE]
Here is the code snippet that I'm using for building this layout.
PS : it's an Angular app so I'm using <router-outlet> where I display the content's components:
app.component.html
<div class="dp-flex-display dp-flex-row dp-full-width-height">
<aside>
<dev-portal-side-navigation></dev-portal-side-navigation>
</aside>
<aside class="dp-full-width">
<router-outlet></router-outlet>
</aside>
</div>
app.component.scss
.dp-flex-display {
display: flex;
}
.dp-flex-row {
flex-direction: row;
}
.dp-full-width-height {
min-width: 100%!important;
min-height: 100%!important;
}
.dp-full-width {
width: 100%;
}
I have one header, one sidenav and one footer component as a shared module for my website.
I am trying to create a form to search product inside sidenav content and for that I have created a layout module which look like below.
default.html
<app-header (toggleSideBarForMe)="sideBarToggler()"></app-header>
<mat-drawer-container>
<mat-drawer mode="side" [opened]="sideBarOpen">
<app-sidebar></app-sidebar>
</mat-drawer>
<mat-drawer-content>
<router-outlet></router-outlet>
</mat-drawer-content>
</mat-drawer-container>
<app-footer></app-footer>
default.scss
:host {
display: flex;
flex-direction: column;
height: 100%;
}
mat-drawer {
width: 350px;
}
mat-drawer-container {
height: 100%;
}
mat-drawer-content {
padding: 20px;
}
Everything is working fine but when I scroll down my search form page, footer overlaps my buttons like below.
Can somebody tell me where I am doing wrong? Any kind of help would be appreciated.
PS: I am not good in CSS so kind of hard to understand. I am also searching for solution on google meanwhile.
If i understand correctly, the two buttons (red and blue) are on your search form page and it is scrolable.
Try to apply padding-bottom:<the height of footer>px on the container of search page.
I know this might be asked a lot but somehow I can't find the solution. My project in React and my top component is setup up like this:
<Provider store={store}>
<Router>
<Header />
<Switch>
<All the routes />
</Switch>
<Footer />
</Router>
</Provider>
As you can see I want to use Header and Footer in all my pages. With my current setup, it works when my content height is bigger than view-height. I mean footer stays always on the bottom. The problem becomes on my smaller pages where the page content is smaller than view-height but my footer is still slightly below the view-height.
My current css code (didn't include unnecessary code):
Header
padding: "0.2em 4em"
Content-Wrapper
minHeight: "100%",
Footer
padding: "3em"
One of the pages on the link (that shows how footer is below the vh. Header stays at the top as a default block element and is fine ): Result
you should make use of flexbox in this case. Your code is in react but I will try to use html and css so you can understand the rules you have to apply. Look at this example:
.app {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
position: sticky;
top: 0;
padding: 15px 5px;
background-color: pink
}
.footer {
padding: 15px 5px;
background-color: pink;
margin-top: auto;
}
<div class="app">
<div class="header">
Your Header
</div>
<div class="app-content">
Your will have routes here that will render your components as required
</div>
<div class="footer">
Your Footer
</div>
<div>
Trick here is to use margin-top on footer and it will produce the result you are looking for.
Let me know if you have any further question or confusion on this.
I'm trying to understand some functionality of margins within React and still newbie with react. Currently, I have a render method that has some JSX/HTML. I'm trying to use CSS to style it better but have some questions regarding the code.
In the CSS, I had Buttons with Margin: auto; to center the elements within the container NavBar but it is not working. But when I have text-align in the .NavBar it works. Why is that? I thought it would work within Buttons because it will center relative to its parent container -> NavBar.
2.In .NavBar, when I have height 20% for example, it does not change unless I hard code in pixels. Since NavBar is the child of the main App.js, wouldn't it work in relative to the App file?
App.js:
import React from 'react';
import {NavBar} from './NavBar/NavBar';
function App() {
return (
<div className="AppMain">
<NavBar/>
</div>
);
}
export default App;
App.css:
.AppMain{
height: 100%;
}
NavBar.js:
import React from 'react';
import './NavBar.css';
export class NavBar extends React.Component{
render(){
return(
<div className="NavBar">
<button className="Buttons">About</button>
<button className="Buttons">Contact</button>
<button className="Buttons">Info</button>
<button className="Buttons">Home</button>
</div>
)
}
}
NavBar.css:
.NavBar{
background-color: black;
height: 20%;
}
.NavBar .Buttons{
margin-right: 20px;
margin-left: 20px;
text-align: center;
margin:auto;
}
You need to add a <div> that wraps all the buttons together and just put margin: auto; on that div, and you can remove the margin:auto; from the buttons.
Hope this helps
margin: auto; only works if the width is specified and if the element is block-level. Look at this answer to understand how centering with margin: auto; actually works.
The height doesn't work because you've set the height of the AppMain to 100% which will be calculated after everything is rendered onto the DOM. You're basically trying to calculate 20% of 100% of something that isn't calculated yet. Try explicitly setting the height of the AppMain and see what that does. Relevant answer link.
The default display of the Button is inline-block. if you want to use margin: auto, You just need to change the display value to block