I am trying to "mobilize" a site I am working on, I set it up so that the text boxes are in a column with display: flex, flex-direction: column. I then ordered the divs as they need to be displayed differently on a mobile device than on a regular browser.
This is my result: http://codepen.io/anon/pen/gpBvyg
It looks to be formatting correctly in FF so far as I can tell. But in Chrome, it doubles the height, at least it is for me. Is this a bug or am I missing something?
Let me know if I am missing any details to clarify.
Thank you!
You have br elements in between your div elements which are child elements of your flexbox. When you reorder the div elements you aren't ordering your br elements, which are occupying the top of the page and creating the blank space.
I suggest removing all of the br elements and trying to get your non-mobile page to look good without them.
Here is a codepen with all of the BR's removed. http://codepen.io/anon/pen/ZGqxzm
No space is being occupied at the top.
If you post some more code I can give you some more advice about how to have this work on both mobile and desktop more easily.
Related
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 was trying to position: absolute an element within a table, and found that for cells which span multiple rows, it would only reach the bottom of the first cell, and that this would only happen in IE. After some tinkering, it seemed the cause of this problem was that the table was nested in a div with display: -ms-flexbox, and removing this css meant the element could reach the bottom of the second row which the cell spanned.
Here is a JS Fiddle showing what I mean. In Chrome this would work correctly, in IE10, the green boxes aren't aligned to the base of the rowspan cell.
https://jsfiddle.net/LomLdtxg/8/
Can anyone explain how these two pieces of CSS interact, and why this happens? This seems to only be an IE explorer issue, is there some workaround / hack that needs to be done in order to have it render correctly?
I use some DIV to create blocks with data inside.
I've set them to "inline-block" because I want the div to adjust his width to the content.
IE8 adjust his width to my content but I have a weird problem.
If you go to this fiddle : http://jsfiddle.net/GvMW8/ and click to the first or second link, you can see that divs are overlapping.
If you go to this fiddle : http://jsfiddle.net/hhpRP/1/ and do the same operation, it works!
The only difference between these two fiddles are the 'id' attribute of the main divs.
I don't understand why I have this problem, but can you tell me how to make it works with the inline-block display AND a div id?
Thanks for your help!
Looks like a little IE8 bug.
Check out http://jsfiddle.net/willemvb/fjqUc/
I added an extra class for the div around bigBlock and made it display: inline-block.
I also shortened your javascript.
This seemed enough to make IE8 listen :)
I am currently working on a prototype that is using CSS3 multi columns for dividing up content and it appears to work well. My issue is that inside of a block that is part of the columns there is an expanding height section and well, in Firefox when the height of an element inside of a CSS3 multi-column changes it disappears and then Firefox crashes.
Shouldn't CSS3 multi-columns take into account varied height content inside or is it not made for that sort of thing? I'd really hate to have to use a plugin like Columnizer, because Columnizer is a pain in the butt to get working correctly.
Here is the layout:
[DIV]
[CONTENT] - Default height is 38 pixels
[EXPAND LINK] - A link when clicked that modifies the height of content to be 52 pixels.
[/DIV]
The issue is as soon as the link is clicked and the height changes, it's like it loses its layout and positioning (the height and width change to 0), then Firefox crashes. This is also the case if I use Firebug to change the height manually.
I resolved the issue right are posting this question basically and my solution was as follows in-case someone else runs into this issue which I believe some will.
I had a parent div element with the appropriate CSS3 multi-column code. The inner elements are article elements (you could just use div's though). The issue was that the inner article elements were being floated left (just out of pure habit of having to float things to give the appearance of columnised items). The floated elements were clashing with the CSS3 multi-column code thus crashing the browser.
I'm guessing that because a float modifies the layout of an element, the multi-column code was trying to perhaps readjust the box and then getting into an endless loop. I'm not entirely sure what went on, but floating elements inside of a multi-column div or anything is bad.
My current layout is based on this:
http://www.cssplay.co.uk/layouts/body5.html
It involves three columns which are each independently scrollable and fluid. However my web app can only shrink in width so much, and at a certain point I would like for something like a min-width (where they will have to scroll horizontally to experience the site)
I tried putting a min-width on the body, but that did absolutely nothing. I also tried wrapping the columns in a containing div and giving it a min-width, this also did not work.
Does anyone else have any ideas on how to approach this.
Thanks
I'm basing my answer on the link you provided.
On html and body, remove overflow:hidden.
On body, add position:relative; min-width:960px.
Tested in recent versions of Chrome, Safari, Firefox.
This also works in IE7+ if you remove the comment at the top <!-- IE into quirks mode -->.