please take a look:
https://jsfiddle.net/sgtooLnb/1/
so basically a flexbox column layout and an html structure like this (I must add some more code for the parser..):
<header>The header content goes here.</header>
<div class="content">The main content goes here.</div>
<footer>The footer content goes here.</footer>
On android (4.4.2), a layout like this seems not to work. Footer will always stick on bottom, while overflowing content will be below the footer.
Sadly, you cannot see this behavour from jsfiddle, but maybe some of you have had the same problem before.
Any solution?
Ok, by better indagating this and this I found out that the problem is this even if Android is not mentioned on the affected browsers list. So, my solution was to add flex-shrink: 0 to the content:
body{
display: flex;
flex-direction: column;
height: 100%;
}
.main-content{
flex: 1 0 auto; // flex-shrink:0 > android 4.4.2 fix (and some other browsers too)
}
It's also good to assign some kind of flex property to header and footer. I noticed on Android 442 that otherwise the bg color was gone:
.main-header,
.main-footer{
flex: none; // or flex something.
}
Also please note that I'm using Autoprefixer. Otherwise, you should not use the shortcut on main-content (IE shit-fix):
.main-content{
flex-grow: 1;
flex-shrink:0;
flex-basis:auto;
}
Finally, to the one that downvoted this thread: you had the relevant code on the jsfiddle. Also, if you really knew the subject, you didn't need any code. And if you didn't know the subject, you shouldn't downvote anything.
Now please downvote again, so this material won't help anyone. Is this the main stackoverflow target?
The children elements of your flex element (body) need to be display: flex as well. If you add the style
body > * {
display: flex;
}
I believe you'll get the desired result
Related
So as I am learning flexbox, i am experimenting with justify-content: flex-end and it comes to no avail, I want to use flexbox to move the content of the header tags to the right hand side without using padding.
my code is uploaded on gitub on: https://github.com/SmileyFaceImoji/Landing-Page
I highlighted the div that holds the header links in green to see if i didn't reference the proper tag and i did
the goal is that i make a landing page similar to this: https://cdn.statically.io/gh/TheOdinProject/curriculum/81a5d553f4073e593d23a6ab00d50eef8620796d/foundations/html_css/project/imgs/01.png
Not sure if this is what you wanted but from looking at your image I believe you wanted this
Just add following codes
This codes places your items at end of your flex box + makes sure your items don't go too wide on large screen
If you have smaller screen, you can test this using command & - on Mac, Alt or CTR on Windows
.hero {
max-width: 1000px;
margin: auto;
}
.header-links {
width: 100%;
justify-content: flex-end;
}
I really need your help here. I am very new to this Front End work and have submitted few questions related to this issue.
I am building an UI using react js. Where i display the cards for products and resources. I am using display flex in the container and making it center justified. But the issue is
I want to limit 4 cards per row
The width and hight of the cards to remain same irrespective of screen size
I have two sections where i display cards, at first place i am displaying 8 cards and the second place i am displaying two. I want the cards should start from same position in the UI
Alignment issue with header section
Here is the code and Demo: https://codesandbox.io/s/527rx9
Here is how it looks currently
I got some feedback from other questions i had pasted to use width to 1500px. But deep down i feel , not a right way and will break in some screen. But in this case as well i see alignment issues. below image by using 1500px in container width
Really need your help here to have a fix around it. If you are willing please paste the codesandbox or anyother link with a working code.
Regarding your container css for the grid:
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
/* width: 1500px; */
}
It's no problem setting a max-width and you should do it, however dont use a specific width, instead set the max-width to 1500px if that's your desired max-width
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
max-width: 1500px;
}
However i would recommend putting all the content below your banner inside of a div
<div class="content-container">
And setting the CSS of that one to the max-width in order to avoid some indentation problems to solve this specific problem
Example: https://jsfiddle.net/notayam/4mLzus0y/
I set top-padding and bottom-padding to zero, and the layout display of the box model in the inspector shows 0 above and below, but as you can see from the jsfiddle there's still blank space there. And furthermore it's not centered vertically.
Adding vertical-align: middle !important; didn't help.
I got it centered vertically by trying different values for line-height, but that doesn't get rid of the unwanted padding above and below the text.
I dug out some older code that had a similar situation (using bootstrap) that I had muddled around with long enough to get it roughly like what I want. It used display: inline-block where this uses block. and although I have no idea if that might help I tried including display: inline-block !important; here. But it still shows up as block in the inspector; it shows both my css and spectre css specifying inline-block, but then block on the element. I couldn't figure out where that was coming from or why the override didn't work.
Tips on debugging CSS more efficiently would be very welcome. I really just need to get a table to display a whole bunch of data as compactly as possible, and would love to get that to work and never have to go near CSS ever again.
The rest of the app uses Python 3/Airium/Bottle, if that might matter. Running on Firefox 100.0.2 on MacOS 12.1. I'll only be running it locally so support for other browsers doesn't matter to me.
.btn {
padding-top: 0 !important;
padding-bottom: 0 !important;
height: unset !important;
}
I don't know if I understood what you want, but here is some solution:
.btn-group .btn {
padding-top: 0;
padding-bottom: 0;
/* This is to clear line height */
line-height: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
We can transform your buttons to flex boxes, so you then can control height, and have no vertical padding.
In this page on plunker (https://plnkr.co/edit/gMbgxvUqHNDsQVe4P7ny?p=preview) there is a weird problem.
On Chrome on Windows and Android (Canary also) everything works good. I can scroll the two areas (on the left and on the right) and the top and bottom div of the page are on the top and on the bottom of my device screen. I see them anytime (see the picture below).
On iPad or iPhone, iOS, with Safari or Chrome, this is not what I get. And also on Firefox 47.0.1 on Windows.
The page is long and there is just one scroll on the right, like if there is no flexbox on the page, this code is just ignored:
.bigone {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.main {
flex: 1 1 0;
display: flex;
}
.container-fluid {
display: flex;
}
.col-6 {
overflow-y: auto;
}
Quirk example:
You can see on the iPad or iPhone just by a click on this button:
Why this behaviour?
Safari and Firefox bug or Chrome's one?
Why on Chrome everything good on Windows and Android?
And if in the new Safari in the future this will work good, how to do with the older devices with older iOS and firefox?
I will appreciate any answer. Thanks.
It's both a frustrating and mysterious problem.
The source of the problem in these sorts of questions is normally the minimum sizing algorithm on flex items. These rules, which are part of the spec, prevent a flex item from shrinking past the size of its content. Such behavior prevents a scrollbar from rendering because the content cannot overflow a flex item. It simply expands it.
But none of the standard methods to override that behavior (e.g., min-height: 0, overflow: hidden) seem to work in this case.
Here are two suggestions that may get you closer to a solution:
(1) Since you want the entire layout to appear in the viewport (i.e., no vertical scrollbar on the browser window), don't use min-height to size the container. That allows the container to expand. Use a fixed height instead.
Make this adjustment to your code:
.bigone {
display: flex;
/* min-height: 100vh; <-- REMOVE */
height: 100vh; /* <-- NEW */
flex-direction: column;
}
But that, by itself, doesn't solve the problem.
(2) A simple and quick solution to the problem is to set a height on .col-6.
Add this to your code:
.col-6 {
height: 90vh;
}
So it would appear that Edge, FF and the other "non-working" browsers need a defined height on that container.
revised demo
The Michael_B's answer is not enough. 90vh doesn't work with dynamic header, footer and other divs.
I fixed this (temporarily, until Safari fix this) with this on parent div:
min-height: 100vh; height: 100vh;
and
flex: 1; min-height: 0;' on the first children.
But the smell is heavy.
Try:
margin: auto;
in the css for the flex-item - that did the trick for me (seems like the auto does the magic here ...)
Wanted to share that finding, as min-height, overflow-x, etc ... did not work reliably for me neither.
I've been trying to get my head managing a specific layout without using flexbox (specifically flex-direction: column). I'm almost certain this has been asked elsewhere but for the life of me I haven't been able to find it, so I'm very sorry if it has and will gladly close if anyone can show me it answered somewhere else.
The problem is this: given an arbitrary number of divs, all but one of which have a fixed height, how can I lay them out in a column such that the remaining element fills 100% of the height available to it, after the others have been taken into account?
It looks like (Codepen):
div.container
div.cell.fixedheight
div.cell.fillheight
div.cell.fixedheight
div.cell.fixedheight
div.cell.fixedheight
This is pretty easily achievable using flexbox with something like:
.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.fixedheight {height: 20px;}
.fillheight {flex: 1;}
But I'm essentially not in a position to use flexbox, since supporting older browsers is necessary here.
Edit when I say I can't use flexbox, I mean not even vendor prefixes :(
You can achieve it with table layouts, with a light wrapper of row-style and cell-style divs. If anyone knows of a solution that doesn't involve an extra wrapper in the markup I'll gladly take it :)
See the approach on this Codepen but I'll put the relevant code here:
div.container
div.row.fixedheight
div.cell
div.row.fillheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
div.row.fixedheight
div.cell
and then the CSS:
.container {
display: table;
}
.row {
display: table-row;
}
.row.fixedheight {
height: 20px;
}
.row.fillheight {}
.cell {
display: table-cell;
}
The .cells will accept very little further styling (margins etc) so they'll need to act as a wrapper for whatever richly styled divs you want to put inside them.
Also note that multiple .fillheights will share the available height between them equally.
Also note that the fixed height rows are not in fact fixed height - the 20px will be used as effectively a min-height, but the cell will wrap whatever it has in it. I've been accepting this and setting height: 0 on the cell and height: 20px on an inner div which isn't table-styled.