This question already has answers here:
Padding-bottom/top in flexbox layout
(3 answers)
Closed 7 years ago.
I'm experiencing some weird behaviour with Flexbox on Firefox (latest).
It seems to happen in a very special case, when a child element of a flex item, has an absolute positioned element inside it.
I've created a codepen demo, it works fine in Chrome, however, on Firefox, you'll see that the image disappears.
The demo is at its simplest form. So should be pretty straight forward to know what I'm trying to do (tip: chrome)
http://codepen.io/anon/pen/QwBaLJ
You'll see that the .Item-media element is set to position: relative; with a img inside it, set to position: absolute;
Has anyone experienced this on firefox and managed to find a decent solution?
Important! It's a responsive demo, only the mobile version doesn't work in firefox.
Try prefixing your '...'-flex css
-moz-box-flex: $values
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Related
I have a project, where I am using position: absolute to place names on a leaderboard. This is inside a div which has scroll: auto and is also a flexbox (from Bootstrap). This works fine on Chrome, however trying to use this on Safari ends up with the names simply not appearing.
I have a JS fiddle of a simplified version here: https://jsfiddle.net/gfbu0aez/4/
If you open it in Chrome, the numbers appear just fine, but opening it in Safari results in nothing appearing.
Remove height: 100%; from your .container class, as flex-grow: 1; already does what you need.
See this question / answer for more details.
This question already has answers here:
CSS customized scroll bar in div
(20 answers)
Closed 7 years ago.
I want to customise the scroll bar.
According to this: http://webdesign.tutsplus.com/articles/quick-tip-styling-scrollbars-to-match-your-ui-design--webdesign-9430
you can do it using -webkit-scrollbar. However I cannot seem to find anywhere which browsers support this feature including caniuse.com.
Can someone please tell me where I can find out which browsers support this feature!
As it says -webkit- I assume it works on safari and chrome. But even then which "versions" of these browsers does this work on? What about andriod/ chrome mobile browsers .
Thanks!
You can for IE and Webkit browsers but Firefox would require a JS solution - and if you bother to do it in JS, it doesn't really need you to do it in CSS as well.
An example of a JS scrollbar jQuery plugin.
Edit: Mobile browser - you apparently can style these but I haven't noticed them styled at all, nor did I even know my phone had scrollbars until I just checked. This plugin seems to be able to style them.
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
We use flexbox heavily for an desktop application like looking web app and it has been working out great.
But with the latest Firefox Developer Edition (35.0a2) the layout does not behave as expected (it grows beyond the viewport): http://tinyurl.com/k6a8jde
This works fine in Firefox 33.1.
I would assume this has something to do with the flexbox changes described here:
https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility
But sadly I can't yet figure out a way to get the FF 33.x behavior in FF 34 or 35.x.
Any help regarding the layout or how to better isolate the problem is appreciated.
The relevant difference there is the "implied minimum size of flex items", a new feature in the flexbox spec. (or rather, a feature that was removed and re-introduced)
The simplest (bluntest) way to restore the old behavior is to add this style rule: * { min-height:0 } (or min-width, if you were concerned about overflow in a horizontal flexbox; but it looks like your testcase only has trouble with overflow from a vertical flex container).
Updated fiddle, with that change:
http://jsfiddle.net/yoL2otcr/1/
Really, you should only need to set min-height:0 on specific elements -- in particular, you need it on each element that:
is a child of a 'column'-oriented flex container
has a tall descendant, which you want to allow to overflow (which will perhaps be handled gracefully by an intermediate element with "overflow:scroll", as is the case here)
(In your case, there's actually a nested pile of these elements, since you have a single tall element inside of many nested flex containers. So, you likely need min-height:0 all the way up, unfortunately.)
(If you're curious, this bug has more information & more examples of content that was broken on the web due to this spec-change: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 )
It is more simple than that
Just give the flex children
.flex-child {
flex: 1;
overflow: hidden;
}
without using min-width: 0 hack
none of these fixes worked for me, even though they work. In my case, I was supplying a display: table-cell fallback, which seemed to be taking over. Using SASS, including it like this, the fallback works for IE without affecting FF:
flex: auto; // or whatever
.ie & {
display: table-cell;
}
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
The CSS properties overflow-x and overflow-y should be well supported by all major browsers. So says w3. I've just made an example where we can see that they behave poorly when the visible value comes into play.
You can find the example code here on github or a working live example.
So the irregular behaviour that I see when it comes to the visible value is what I'm trying to avoid. I would like a vertical scroll (auto or scroll), and visible overflowing content horizontally. Have just tried this on Chrome and FireFox
How can I solve this, and is this the intended behaviour?
This is expected behaviour, see the w3 Spec.
What it boils down to is that in instances where it is not possible to have visible and hidden together, the visible is set to auto instead.
This is a CSS related question, I got one good answer from my previous question, which suggested the use of some CSS code like overflow:auto together with a fixed height container.
And here is my actual implementation : on uni server
If by any chance you cannot access that server, try this
Please follow the instructions on screen and buy more than 4 kinds of tickets.
If you are using IE8, Opera, Safari, Chrome, you would notice that the lower right corner of the page now has a vertical scroll bar, which scrolls the content inside it and prevent it from overflowing. That's what I want to have in this section.
Now the problem is, this would not do in FireFox 3.6.2. Am I doing something not compliant to the CSS standard or FireFox has its own way of overflow control?
You can inspect the elements on screen, and all controlling functions are done in one javascript using jQuery. All CSS code is kept in a separated file as well.
According to the professor, FireFox would be the target browser, although the version was set to 2.0...
It seems you have to set a height / overflow to the <tbody> tag, not just the table (or maybe not the table at all, didn't test that).
So...
tbody { height: 130px; overflow: auto; }
And I specifically tested with "height", it seemed "max-height" didn't work as intended. Very odd behavior, indeed.
Have you tried overflow: scroll?