I am faced with getting a rather complex web app to work in HTML/CSS. I am finding many issues with the flexbox, which seems like it would solve my problems. I'm trying to understand what I'm doing wrong or what the flexbox limitations are. I am only working in Chrome so that helps.
I keep seeing two issues:
- the boxes don't understand how to accommodate heights/widths of children contained inside
- child boxes aren't contained by parents. Image of this issue:
Instead of posting code here is a JSFiddle: http://jsfiddle.net/dex3703/ryCQq/
Isn't fully complete but you get the idea I hope. The CSS is combined from three different files.
Thanks!
Figured it out. All containers must be set to display: box (or -webkit-box, etc). If you want a box inside a box, they all must be boxes. Hope this helps someone!
Related
At some viewport I want to be able to swap some of the divs as shown by the figure below.
I don't want to use workaround such as replicating the same divs here and there and then using display:none to hide them, so please don't suggest this solution unless you think it's the only way to achieve so.
How would you solve this problem using Flexbox? What would the box model be like?
What I've tried so far:
playing with order CSS selector. But it works only if all the divs are in the same container (doesn't seem to work with this problem).
A1 and A2 are visually a single item, as suggested by its colour, but I guess I might need to split it in 2
PS: please note that the problem is NOT how to build any of these layouts themselves neither how to use media queries.
So I have a post-view that I can't get to work properly, and flexbox seemed like the answer from heaven that I was looking for. Except, I can't seem to figure it out properly no matter what...
If you look at this code, there's two vertical divs that should both stretch as more content gets added to either. The div where more content appears grows accordingly, but I want the other div to match in length, and so the bottom edges to be aligned to the bottom of the flex box. The repeating images behind the two founder buttons and the "LOTS OF TEXT" should then fill up empty space down to the bottom where the bottom-edge images are.
I've been at this for a good week now and can't figure it out... I'm sorry if this is a really simple thing or I'm being dense about css, I'm still learning. Any help would be greatly appreciated.
In your .forumviewright class, add this property:
height: 100px;
That brings the baselines together.
Just tested it in Chrome Dev Tools. It works. It also works in FIDDLE. But it doesn't seem to work in the CSSDesk sample you provided.
Whether or not this is the permanent solution you're looking for, you can let me know in the comments below.
EDIT
Your question begins with:
Can't get CSS flexbox to expand properly.
Actually, the flexbox is working fine. Both columns are binded to each other and expand equally, as per the flexbox rules.
If you highlight the child divs (.forumviewleft and .forumviewright) in Chrome Dev Tools or Firefox Inspector, you'll see that both columns are equal height and track each other regardless of content size on either side.
To illustrate this, I've added a background color to each column div so you can see that the flex is working properly. No other changes to the code were made. In this example, no matter how much content is placed in either column, both color-coded columns remain equal height.
https://jsfiddle.net/eympj0yq/2/
Of course, the real problem is that the child container boxes inside these columns aren't tracking each other.
This will require some fundamental adjustments to your code. For a better understanding of this problem and how to fix it, see this post:
Height 100% on flexbox column child
Hope this helps. Good luck!
I'm already spending way too much time about two divs placed inside the footer that are placed outside the container for some reason. Checked my HTML and CSS over and over but can't see what's wrong with it.
It's probably a floating/clearing issue or some little typo in my code but I just can't find it. Any help solving this is really appreciated.
The page can be found at http://nionwebdesign.com/dev/check. It's about the 'Bestellen' and 'Info' parts that are placed outside the white container.
Thanks in advance!
Probably you have them floated. Parent elements are never to expand to contain floated elements. To have this do what you want, add overflow:auto to the "container" parent element.
Here you can find a description of the problem and commented solutions:
http://www.quirksmode.org/css/clearing.html
This SO answer lists all the best solutions, starting with the more recent "micro-clearfix" one from 2011.
The overflow: hidden solution isn't without its problems, which you may or may not run into depending on your page layout.
What methods of ‘clearfix’ can I use?
I'm going to create a horizontal grid layout with CSS. (And I'll make it to scroll horizontally by JQuery and this solution. Please note that scrolling is not my problem. my problem is about creating the grid)
This is an example:
I have searched the internet about CSS Grids, but it seems that they can't help me...
My Question is, how to create something like the image above? Which plugins, or css properties should I use for this purpose?
EDIT: I want to have fixed number of rows (I mean, the number of rows should not change when I resize the page. there should be an scrollbar instead.) (I will use it inside a div with overflow: auto)
display:table, display:table-row, display:table-cell, display:inline-block
These css properties can help, just look them up on your local css information site.
The table-values let every element behave like a table, without actually using one. This may be a good solution for your problem.
The inline-block-value solves the overhang problem some floating layouts have as the blocks are displayed inline, just like imgs. There is little support for this in old browsers, of course.
I'm currently working on a UI that requires that I have a table with cells whose text is read vertically instead of horizontally. To do this, I am using CSS rotate transforms.
The problem I am running into is that the content is being measured before the render transform is taking place. This is causing my table to render incorrectly, giving wide columns instead of narrow ones.
Is there any way to fix this behavior with either css or javascript?
JSFiddle
Check this out: http://jsfiddle.net/c29rr/
I don't know if it will work in your case since it uses float:left to make the cells behave as divs but it's a start.
Not the best solution, but here's what I came up with: http://jsfiddle.net/gJCtN/2/
Also, vertical-align is not supported by elements without display:table-cell or something like it. More info.