I'm stuck with displaying a React component named "home" that take 100% of the height of my screen.
Whatever I use CSS or React inline style it doesn't work.
In the example below, html, body and #app are set to height: 100% in CSS. For .home I used inline style (but whatever I used CSS or inline style is the same):
The issue seems to come from <div data-reactroot data-reactid='1'> that is not set with height: 100%.
If I hacked it with Chrome developer tool, it's work:
So what is the proper way to display a full height component in React ?
Any help is welcome :)
html, body, #app, #app>div {
height: 100%
}
This will ensure all the chain to be height: 100%
You could also do:
body > #root > div {
height: 100vh;
}
try <div style = {{height:"100vh"}}> </div>
It annoys me for days. And finally I make use of the CSS property selector to solve it.
[data-reactroot]
{height: 100% !important; }
Despite using of React here - elements layout is completely html/css feature.
The root cause of the issue is in how height property in css works. When you are using relative values for height (in %) - this means that height will be set in relation to its parent.
So if you have a structure like html > body > div#root > div.app - to make div.app 100% height all its ancestors should have 100% height. You may play with next example:
html {
height: 100%;
}
body {
height: 100%;
}
div#root {
height: 100%; /* remove this line to see div.app is no more 100% height */
background-color: indigo;
padding: 0 30px;
}
div.app {
height: 100%;
background-color: cornsilk;
}
<div id="root">
<div class="app"> I will be 100% height if my parents are </div>
</div>
Few arguments:
Usage of !important - despite some time this feature is useful in ~95% of cases, it indicates a poor structure of html/css. Also, this is not a solution to the current problem.
Why not position: absolute. Property positon is designed to change how the element will be rendered in relation to (own position - relative, viewport - fixed, nearest parent whos position is not static - absolute). Ans despite position: absolute; top: 0; right: 0; bottom: 0; left: 0; will result in the same look - it also pushes you to change parents position to something not static - so you need to maintain 2 elements. That also causes parent div be collapsed in a line (0-height), and inner - full screen. That makes confusion in element inspector.
I managed this with a css class in my app.css
.fill-window {
height: 100%;
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
}
Apply it to your root element in your render() method
render() {
return ( <div className="fill-window">{content}</div> );
}
Or inline
render() {
return (
<div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
{content}
</div>
);
}
#app {
height: 100%;
min-height: 100vh;
}
Always full height of view min
While this may not be the ideal answer but try this:
style={{top:'0', bottom:'0', left:'0', right:'0', position: 'absolute'}}
It keeps the size attached to borders which is not what you want but gives you somewhat same effect.
body{
height:100%
}
#app div{
height:100%
}
this works for me..
<div style={{ height: "100vh", background: "#2d405f" }}>
<Component 1 />
<Component 2 />
</div>
Create a div with full screen with background color #2d405f
I had the same issue displaying my side navigation panel height to 100%.
My steps to fix it was to:
In the index.css file ------
.html {
height: 100%;
}
.body {
height:100%;
}
In the sidePanel.css (this was giving me issues):
.side-panel {
height: 100%;
position: fixed; <--- this is what made the difference and scaled to 100% correctly
}
Other attributes were taken out for clarity, but I think the issue lies with scaling the height to 100% in nested containers like how you are trying to scale height in your nested containers. The parent classes height will need to be applied the 100%. - What i'm curious about is why fixed: position corrects the scale and fails without it; this is something i'll learn eventually with some more practice.
I've been working with react for a week now and i'm a novice to web developing, but I wanted to share a fix that I discovered with scaling height to 100%; I hope this helps you or anyone who has a similar issue. Good luck!
For a project using CRNA i use this
in index.css
html, body, #root {
height: 100%;
}
and then in my App.css i use this
.App {
height: 100%;
}
and also set height to 100% for a div within App if there is one eg-
.MainGridContainer {
display: grid;
width: 100%;
height:100%;
grid-template-columns: 1fr 3fr;
grid-template-rows: 50px auto;
}
Try it to solve your problem
<div style = {{height:"100vh"}}> </div>
Adding this in the index.html head worked for me:
<style>
html, body, #app, #app>div { position: absolute; width: 100% !important; height: 100% !important; }
</style>
I had trouble until i used the inspector and realized react puts everything inside a div with id='root' granting that 100% height along with body and html worked for me.
CRA has a #root div to which we render our react app, so it should also be considered a parent div and give appropriate height according to your need. This answer is based on my experience with a similar situation and giving 100% height to #root helped me fix the height issue with one of it's child element.
This depends on the layout of your app, in my case the child was not able to takeup the given height because #root(parent) div had no specified height
Funny how this works since I thought html was the one with not full height, turns out it was the body.
Just add the below css in index.css:
body{
height: 100%;
}
There is an existing body tag? Add it in there!
I'm currently trouble shooting in NextJS 13 & Tailwind to achieve this.
There's an additional layer of < div>'s that I'm unable to locate generated from Next's new AppDir.
One way to trouble shoot that nobody mentioned, which is easy to overlook is:
Open your Web Dev Tools and modify each ancestor to height:100% or in Tailwind 'h-full' and you'll save time to see if height full is the appropriate solution for your use case. I was quickly able to find out my footer component overlaps my div with this method instead of wasting time.
Edit: Reason for Next 13 user https://github.com/vercel/next.js/issues/42345
try using !important in height. It is probably because of some other style affecting your html body.
{ height : 100% !important; }
also you can give values in VP which will set height to viee port pixel you mention likeheight : 700vp; but this wont be portable.
I'm trying to make my site a little more mobile-friendly. I have some graphs that look best when they can be pretty wide (800px), but I would prefer for them to shrink on mobile instead of having a scroll bar. I've added this to a stylesheet:
#media screen and (max-width:600px){
div.graph {
max-width: 100%;
margin: auto;
height:400px;
}
}
#media screen and (min-width:601px){
div.graph{
max-width: 800px;
margin: auto;
height: 400px;
}
}
And included that in my master page:
<link href="~/Styles/ResponsiveDesign.css" rel="stylesheet" type="text/css" />
Here is one of the divs that holds a graph:
<div class="graph" id="myDiv" ></div>
The problem is when I view the page with the browser full-size now, the graph is huge--far more than 800 px. Even if I change the max-width to something ridiculous like 25px, it's still huge. Any thoughts?
Do like this (and make sure custom CSS is loaded last if you use a library)
Update based on a comment
Since inline style work, add !important like this and it should work
width: 800px !important;
max-width: 100% !important;
and if it does work, you do have another rule overriding these or else they would have worked without the !important
div.graph{
width: 800px;
margin: auto;
height: 150px;
background: red
}
#media screen and (max-width:800px){
div.graph {
max-width: 100%;
}
}
<div class="graph" id="myDiv" ></div>
In this particular case you actually don't need the media query at all
div.graph{
width: 800px;
max-width: 100%;
margin: auto;
height: 150px;
background: red
}
<div class="graph" id="myDiv" ></div>
i think you should set it in percentage.
Ok, so if I understand it correctly you are trying to set the max width to 800px if the screen's width is bigger than 600px. How bout concretely setting the width of the div to 800px if the screen is bigger than 800px?
Alright, than the only other thing I can think of is its calling the other css block where you set the max-width to 100%. Maybe since its the same class name it is doing this I dont know. You could try commenting out that line and just trying it to see what happens. And sorry Im editing and not commenting I just started so I cant comment...?
I think the problem might be with the graph size itself, could you inspect element and check the size of the contents of the graph? My guess is that the div is the correct size, the graph isn't. We'd need to know how you are creating the graph for more specifics. Could you screen or put a demo of the graph?
Possibly also try a more specific selector? Ex:
body div#id div.graph{}
(I can't comment, sorry if this is not an answer)
How do I make a large image smaller via CSS, with the image located on a JSP page?
I have tried different height, width, size and-so-on keywords, but nothing seems to work.
It is possible though to move the image around, but can't figure out how to make it smaller.
The picture is saved in my project (it's not from an url).
HTML:
<div id="AUlogo">
<img src="aarhus-university.png">
</div>
CSS:
#AUlogo{
margin-left: 23%;
}
Hope my question is clear!
Try like this: Demo
#AUlogo img {
max-width:100px;
}
Specify the value in max-width as you need.. Hope this helps!!
try using
max-width: 90%;
and
max-height: 90%;
that should work, and when you did just height did you change the width or vice versa because if you dont change it with the same ratio as the img had it might mess up so try
height: 55px;
width: auto;
Simple way is to use CSS Resize Property
#AUlogo {
resize: both;
overflow: auto;
}
For resize Property you can use different values like
resize:both,horizontal,vertical,initial;
You can have any one of the property values to resize your image
So I'm trying to understand why jQuery-ui's autocomplete, with appendTo used to attach the results dropdown to a div, still dynamically positions the results with absolute positioning. Like this:
top: 38px;
left: 8.5px;
width: 251px;
Creating issues like:
Can I turn off this dynamic positioning? I would like full control over the UI for fluid responsivity and custom styling. I cannot find an answer online.
UPDATE:
So it seems that each widget has different rules, is this correct? I figured out responsive width for jQuery-ui Dialog popup by
$("#dialog").dialog({ width: auto });
& in my stylesheet, applying a max-width to the wrapping dialog class.
.ui-dialog{
max-width: 720px;
}
However top and left are still a mystery as of yet.
You can change the CSS used by either editing the jQuery UI CSS file, or else just overriding it in your own CSS, such as:
ul.ui-autocomplete { width: 250px !important; max-height: 300px; overflow-y: scroll; overflow-x: none; }
Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
#container1 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/1.png);
}
#container2 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/2.png);
}
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
Source
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
If you would like to have your image scale with your browser, set the width to a percent instead of defining it as a number of pixels.
So if you wanted the image to always cover half of a div:
<div class="my_div">
<img src="http://example.com"></img>
</div>
<style>
.my_div .image {
width:50%;
}
</style>
As you change your browser window size, the size of the image will change. You might want to take a look at Responsive CSS Frameworks, such as Twitter's Bootstrap, which can help you achieve exactly this behavior.