The image caption and content is held in place by the image. When window is resized or image is loading the page content jumps up and is then jumps back down again.
Is it possible to prevent the content from moving in this way?
<div class="profile">
<img src="http://lorempixel.com/g/720/720/nature" alt="" />
</div>
See https://codepen.io/atoms/pen/bRdLVe
Built on Chris Ferdinandi's Kraken CSS framework.
This seems to do the trick:
.profile {
position: relative;
width: 100%;
padding-bottom: 100%;
float: left;
height: 0;
}
.profile img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
and the result:
https://codepen.io/atoms/pen/jwbOYe
Now when you reload the page the text stays in place even when the image has not yet loaded. And you can resize the browser window to reflow the contents with the same result.
Not sure if the CSS is entirely correct but it seems to work.
Firstly, you can add a class to your caption, like following:
<p class="image-caption"><small>Image caption</small></p>
And then add a "hidden" class in CSS:
.hidden {
display: none;
}
Then use jQuery to implement this feature:
$(document).ready( function() {
$(".image-caption").addClass("hidden");
$(".profile img").on('load', function() {
$(".image-caption").removeClass("hidden");
})
});
Note: you need to include jQuery in your HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
This depends on if you are going to have consistent image sizes or not. If your images will always be the same size in that spot, you can set a CSS height of the image size on the image (or even your profile div) and that will create the space on the page before the image loads, preventing the jump.
.profile img { height:250px }
If your images will vary in size and you need to avoid distortion, a JS approach like also mentioned here might be a better approach.
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.
Is there a quick and easy way to keep a navigation not moving while resizing the window ?
What I have at the moment is something like this which is obviously wrong because proportions will change.
I am not sure if I should use a fixed width though ?
#mainnav {
position: absolute;
left: 30%;
top: 75px;
width: 50%;
}
Thank you for your answers.
It really depends on what kind of page you are creating. If you are creating something responsive/interactive, you may need fixed or absolute navigation, but it's hard to tell from the code that you provided.
A more traditional approach would be to wrap your page content in a container with a fixed width:
<div id="container">
<div id="mainnav">...</nav>
<div id="main-content">...</div>
</div>
CSS
#container
{
width: 1000px;
margin: 0 auto; // will center your container inside page body, even on resize
}
#mainnav
{
display : block;
}
This way your nav will stay together with the content and wont resize. it's also much easier to manage what's inside the navigation element.
I'm going to guess the answer to this question will be "no," but it would be so nice, I'm going to ask anyways.
What I'm trying to do is freeze an element inside a scrollable DIV such that it stays in place vertically. This is to implement a frozen row feature in a table.
It's pretty easy to do with JavaScript and absolute positioning. Here's the HTML for a container and three inner DIVs (see here for the live version):
<div id="container">
<div id="background">
Content
</div>
<div id="absolutediv">
Absolute stays inside
</div>
<div id="fixeddiv">
Fixed escapes!
</div>
<div id="absolutediv2">
Stays put!
</div>
</div>
The relevant CSS:
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#absolutediv {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
#fixeddiv {
position: fixed;
top: 100px;
width: 300px;
background-color: #ECC;
}
#absolutediv2 {
position: absolute;
width: 300px;
top: 120px;
background-color: #ECC;
}
And JavaScript that will hold #absolutediv2 in place:
var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');
container.addEventListener('scroll', function() {
div.style.top = container.scrollTop + 120 + 'px';
});
So #absolutediv2 is behaving the way I want. But look at #fixeddiv. This gets close to what I'm after, and I suspect it looks nicer on mobile devices because the browser can hold it in place without waiting to run the script. Except that it (a) runs right over the borders, and (b) doesn't scroll horizontally.
Is there any way to get what I'm after with pure CSS, something that would run well on a mobile browser?
(In my page, one way to do this would be to place the frozen row above the container DIV, but the number of frozen rows changes depending on where the user has scrolled to, meaning that the container DIV would have to move around.)
Edit:
To sum up, I want a div that:
Scrolls horizontally with its container
Stays put when its container scrolls vertically
Looks like it belongs to its container
Looks nice on a mobile browser
The last one is the tricky bit. I can achieve #1, #2, and #3 with an absolute-position div and JavaScript, but it looks ugly on a mobile browser because it lags. Using a fixed-position div, I can get #2 and #4, and I can achieve #1 with JavaScript (the lag doesn't bother me so much horizontally), but not #3, because a fixed-position div suddenly sits on top of its container.
Google has a suggestion for this kind of thing, but it's a pretty extreme solution: https://developers.google.com/mobile/articles/webapp_fixed_ui
Ok, I haven't tested this but it should be along the right track. Basically this gives you the ability to create multiple "Sticker" items with the HTML5 data attribute I created for you data-special="sticker". The jQuery looks for these, then copies the data and appends it to another <div> element that is positioned where the original was, then it hides the original.
#container {
position: fixed;
left: 20px;
width: 250px;
height: 250px;
top: 20px;
overflow: scroll;
}
#original-element {
position: absolute;
top: 30px;
width: 300px;
background-color: #CEC;
}
.sticker {
position:absolute;
}
<div id="wrapper">
<div id="container">
<div id="background">
Content
</div>
<div id="original-element" data-special="sticker">
I want to stay put!
</div>
</div>
</div>
$("[data-special='sticker']").each(function () {
$('#wrapper').append(
$('<div/>').html($(this).html())
.addClass("sticker")
.css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
.css('left', $('#container').css('left'))
.css('width', $('#container').css('width'))
.css('background-color', $(this).css('background-color'))
);
$(this).css('display', "none");
});
Let me know how it works for you, also one downside to this is once the original element is hidden, the space it used to take up is then collapsed... I'll try to brainstorm a solution for that.
Edit:
Changed the JS to get the #container width instead of the original element width as the original element is larger that the container.
Edit:
Tested: jsfiddle
Some issues would be that the element will then also overlap the scroll bar, if you knew the width of that you could then subtract if from the value.
Also check the updated code above. There were some errors...
You might want to have a look at the following post:
How can I make a div stick to the top of the screen once it's been scrolled to?
As explained in this answer:
A script-free alternative is position: sticky, which is
supported in Chrome, Firefox, and Safari. See the article on
HTML5Rocks
and demo, and
Mozilla
docs.
As of today, the demo linked works for me in Firefox but not in Chrome.
I have a setup for a left navigation bar on our website that. The way it is displayed is to have a header image (usually the client's name) at the top of the nav, then to have a table that holds a number of options about what to do. These options vary depending on what the client is. When displaying this nav, there are two images that run down the sides of the primary table, used as borders. These are skinnable images that are one by one pixel images. This way, each client's skin can be a different color while referencing the same image name in the CSS file.
Before we added doc types to these pages, the images were extending to the bottom of the page or the bottom of the content inside of the table, whichever was longer. Now, adding doc types to make the page standard, I cannot get it to do the same thing.
My setup is that I have one DIV as the header which simply holds the header image. Then, I have a DIV as a container with three DIV elements as children. The first and last ones hold the one pixel image as the left and right border and the middle div holds the content table.
I can't set the border image DIVs to 100% height, because the page size will be 100% + the size of the header image. And I can't just rely on the image going to the bottom of the content, because it needs to be the entire length of the page if the content doesn't take up the entire page. I'm at a loss of what to do here, short of using javascript to calculate what the size of the DIVs should be when I resize the page.
By the way, I'm trying to shoot for all browsers, so both IE (at least 9) and Chrome are m test cases. Linking code here to show what my problem is. As you can see, the left, content, and right divs extend past the bottom of the page, which I do not want to happen.
//HTML
<html>
<body>
<div class="NavHeader"> </div>
<div id="NavBody">
<div id="NavLeft"> </div>
<div id="NavContent"> <br> </div>
<div id="NavRight"> </div>
</div>
</body>
</html>
// CSS
html, body {
height: 100%;
}
.NavHeader {
height: 40px;
width: 100%;
background-color: blue;
}
#NavBody {
height: 100%;
}
#NavLeft {
height: 100%;
float: left;
background-color: black;
width: 1px;
}
#NavContent {
height: 100%;
float: left;
background-color: green;
}
#NavRight {
height: 100%;
float: right;
background-color: black;
width: 1px;
}
I've run into a similar case in the past and all I was able to come up with was using javascript...
CSS (as far as I know) doesn't really have that dynamic capability that you are looking for.