I am having a problem in one of my projects. I set the container to be 100vh and 100vw and overflow to be "auto." However, even with these height and width properties, and the overflow, it seems that elements are being pushed out of the div still, and I am not sure why. For example, in this div I have an h1, and an image. I have the h1 displaying above the image; when I have a screen height that is too small, I want the user to be able to scroll. However, even with the overflow set, the h1 gets pushed above the page completely, so it cannot be seen, and cannot be scrolled up to, only the image and everything below it can be scrolled.
My JSX:
<div id="SingleProjectContainer">
<h1>{name}</h1>
{images.map((image, idx) => (
<div key={idx}>
<img src={image} alt="Project Picture" />
</div>
))}
</div>
and my CSS:
#SingleProjectContainer {
top: 0;
padding: 10px;
margin: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
flex-direction: column;
overflow: auto;
flex: auto;
}
#SingleProjectContainer h1 {
font-size: 3em;
margin: 10px;
color: white;
}
I have tried many combinations of position and margin settings and nothing seems to work. I am not sure if there is another css property I am missing. Any help will be appreciated!
Comment to answer:
It is a flexbox issue. Remove justify-content and align items and use margin: auto on the children instead.
Related
I am making a sort of section with one side being a h1 and anchor and one side being an image. However, I am having troubles moving the anchor tag as its not working at all with margin since it adds margin to the entire div. This does not apply to the h1.
Output I want is that I'd like the anchor tag to be moveable with margin etc. without moving the entire div and stuff like that.
.make-account {
height: 100%;
width: 100%;
margin-top: 0.5%;
background-color: #EBCEBF;
display: inline-flex;
flex-flow: row;
justify-content: space-between;
}
.make-account h1 {
margin-top: 5%;
text-align: center;
color: #FDF8F5;
}
.make-account img {
width: 50%;
display: inline-flex;
}
.make-account a {
color: #FDF8F5;
background-color: #266150;
padding: 1% 2% 1% 2%;
text-align: center;
}
<div class="make-account">
<h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>
MAKE AN ACCOUNT
<img src="https://via.placeholder.com/100">
</div>
Edit: How I recognized the problem now is that since it's a flex-flow: row
It recognizes the tag and tag as items, same with , my output that I want is one div with the background-color taking up 50% and that div having an and positioned within them using margin and not being their own items, and another item being the img taking up the other 50%.
add the following to your style
aside {
display: flex;
justify-content: center center;
flex-direction: column;
}
and make sure to wrap the H1 and A in an aside or whatever you like, make sure to edit the style accordingly.
<div class="make-account">
<aside>
<h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>
MAKE AN ACCOUNT
</aside>
<img src="https://via.placeholder.com/100">
</div>
I hope this answer helps you out in your further endeavours!
I want my ReactModal to sit at the bottom of the viewport, but it's sitting right underneath the Results, and all I've tried so far has failed to correct the problem. I know this is a common issue and there are many solutions online, but there is something about how I've got my CSS set up that is not allowing the flex-grow property to work the way I expect it to. Any ideas?
JSX:
<div className='App'>
<div className='main-content'>
<Header/>
<Results results={testData}/>
</div>
<ReactModal/>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
.App {
text-align: center;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 1.5rem;
align-content: center;
min-height: 100vh;
}
.main-content {
flex-grow: 1;
}
flex-grow specifies how much of the remaining space in the flex container should be assigned to the item. If your trying to place the ReactModal to the bottom of the viewport you would probably want to use the example below.
Edited
Codepen Example
If you look at the css file, you would add this:
position: fixed;
bottom: 0;
To your ReactModal component and it would place it to the bottom of the page. You would not use flex-grow because it is totally useless in this situation.
Hope this helps.
I have an image (img tag) and a div, whose display property is set to flex.
div and img are placed in a row. They are floated.
I want to apply margin-left to the div but it does not work, unless I set the display property of the div to inline-block.
I've explored StackoverFlow, the nearest post to my case is this one. But that so post does not make me understand what's going on.
As it can be seen in the image below, the margin of div on the left, overlaps with the image. Why? why isn't it pushing the div to right?:
Here is my code:
html
<div id="traffic">
<p>Traffic</p>
<img id="chart" src="https://www.syncfusion.com/products/flutter/control/images/chart/chart-types/flutter-multiple-axis-charts.png" alt="" srcset="">
<div id="traffic-infos"></div>
</div>
css
#traffic {
background-color: rgb(255, 255, 255);
padding: 15px 15px 15px 15px;
overflow: auto; /* so the container resized its height */
}
#traffic-infos {
display: flex;
flex-direction: column;
margin-left: 40px;
height: 300px;
background-color: black;
}
#chart{
width: 100%;
max-width: 850px;
min-width: 600px;
height: auto;
float: left;
}
the same code in JsFiddle: https://jsfiddle.net/shahryarslg/xmo5uahv/8/
The whole problem is solved if I change the display of traffic-infos class to inline-block. But I want to understand how display is related to this problem? what's going on?
Thanks in advance.
You need to set the margin on the floated element:
#chart {
margin-right: 40px;
}
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I've been on this for a while now and tried a lot of the solutions I've seen across different Stackoverflow questions / blogposts / ... But I honestly can't figure out what's going wrong.
I've got a flexed div with two divs in there. The top div A has a fixed height, the other div B fills the rest using flex: 1;. If the screen is resized and it's smaller than the height of A + B together, then B will start overflowing. I want it to scroll, but I also want the content to be fully visible when scrolling. For some reason which I can't figure out, the content renders out of the top of div B as you can see in this screenshot of my fiddle:
Some of the previously asked questions got me somewhere. For example setting the body to height: auto;, but then when my screen is bigger than A + B it can't be center aligned anymore. min-height: 0; also doesn't seem to help in this case.
How can I make sure my container overflows but will fully show the content of it?
You can solve the issue by giving .second:
flex-basis: auto;
flex-shrink: 0;
Or, with shorthand: flex: 1 0 auto;
Working example:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.second {
flex: 1 0 auto;
background: blue;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
overflow: auto;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px;
min-height: 0;
/* added this to make it obvious. Obviously, not needed */
padding: 2rem 0;
}
.container-child {
height: 110px;
background: green;
width: 100%;
}
.container-child:not(:last-child) {
margin-bottom: 30px;
}
<div class="second">
<div class="container">
<div class="container-child"></div>
<div class="container-child"></div>
<div class="container-child"></div>
</div>
</div>
I added some top and bottom padding to .container to make it obvious that it's working - but it's not needed.
Now let's look at why this is happening. When you apply .second { flex:1; } it means:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
... which allows it to have a smaller size than its contents.
Whenever you have a bigger child centered in a smaller parent, the browser won't provide a scrollbar to top (or to left, when horizontal), because then , if the top of the parent and the top of the child coincide and the child is bigger than the parent, the child is no longer centered, is it?
The same happens when using other centering techniques and you center a bigger child in a smaller parent.
To fix the problem, you need to prevent the child from outgrowing the parent.
In this case, it meant sizing .second based from its content (flex-basis: auto) and not allowing it to shrink: (flex-shrink: 0;).
To better visualize the issue, consider this example:
.left, .right {
position: relative;
border: 1px solid red;
padding: 1rem 5rem;
}
.left {
left: -5rem;
}
.right {
right: -5rem;
}
<div class="left">
I'm taken left
</div>
<div class="right">
I'm taken right
</div>
If the browser provided scrollbars to allow you to scroll to beginning of .left, it would mean that left: -5rem did not apply. I hope that makes sense, I can't explain it better.
I have two questions. Essentially, I want to display an image in its original size and place it in the middle of the screen(by middle I mean in the "horizontal" middle not the center of the screen), and then place a div with texts right below this image. This is the code I use:
<div class="figure">;
<img src="...">;
</div>';
<div class="text">
text here
</div>
This is the css:
.figure{
position:absolute;
margin:0 auto;
left:0;
right:0;
bottom:10px;
top:30px;
}
.figure img{
margin-left: auto;
margin-right: auto;
display: block;
height:100%;
width:100%；
}
I have two questions. The first one is when the image height is theoritcally longer than the screen height, there is no vertical scrollbar, the image just got resized to fit the screen. The second question is how can I place the text below the image without knowing the size of the image? I tried figcaption but it doesn't work.
To make it perfect center, you might need min-height: 100vh; and min-width: 100vw; then use display flex to center it. Otherwise, you might not center it vertically.
Also, move your text block inside one div with the img.
by default, the img will not resize unless you specify it.
By default div has display block so it will take the whole row, with text-align: center; it will just center your text.
.figure {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-width: 100vw;
}
.centered {
text-align: center;
}
html,
body {
padding: 0;
margin: 0;
}
<div class="figure">
<div>
<img src="http://placehold.it/950x450">
<div class="centered">
text here
</div>
</div>
</div>
First of all I I assume this does what you have in mind.
html
<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/>
<div class="text">Isn't that pretty!</div>
CSS
body {
color: #eee;
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
}
img {
margin: 0 auto;
display: block;
}
.text {
margin: 0 auto;
display: table;
}
Your first question about why the image is resized when it's bigger than the page. I have to point out that in your CSS you set the image to be the 100% the of the possible width and height and by default, the images will be stretched to fit the element.
To answer your second question, because your "figure" div containing the img position is absolute it ignores the position of other elements. Change position to another type such as "position: relative" and it will position its self with other elements in mind.
I'm not the most confident in html and css skills but I hope my two cents at least helps you press on forward.