width: max-content not working in firefox with blueprintjs
i have the following codesandbox, which mirrors a private project in which i have a list of recordings and use blueprintjs to display this list.
Notice i have set width: max-content to the list, however in firefox the recording number goes to a new line. I then use white-space: nowrap to force the desired behavior. However it does not quite solve the issue. the radio buttons now overlap with the recording+number.
1. on both chrome and firefox, white-space is set to normal by default. Why do they behave differently?
2. how do i solve the issue of max-content not working in firefox?
codesandbox: https://codesandbox.io/s/strange-gwen-on3j16?file=/src/app.css
72 Replies
this is what i see in firefox
pretty much same in chrome
no you dont
wait, u have the old sandbox, sorry
check my link again
updated it
i forgot to add gap between recording and number, which is what i have in my actual project
still the same
show me>?
scroll down
in my OP: "then use white-space: nowrap to force the desired behavior. However it does not quite solve the issue. the radio buttons now overlap with the recording+number. "
wtf?
what sorcery is this?
my scrollbar is thinner
when i change it does look like yours
so i guess it calculates the alignment right, after it has considered the scrollbar width
i tried width: -moz-max-content, but it behaves the same as max-content
i guess it doesn't take scrollbar in to account at all
why do you use float for this? use flexbox
you will probably fix that issue then
i dont use float
i use flexbox
the blueprintjs radiogroup/radio applies floats etc.
that's my point don't use float to put the radio button on the right side
if i modify it like this. https://codesandbox.io/s/strange-gwen-on3j16
it hides behind the scrollbar
look how nice it is on chrome.
You could add a right padding on the names-list element to allow for the scrollbar.
is it possible to apply styles only for firefox ?
I have never had to use it but yes ( at least it worked on your code demo).
Either with
@supports (-moz-appearance:none) {
or
@-moz-document url-prefix() {your solution only makes the list wider, but it doesnt push the radio further to the right
CodeSandbox
strange-gwen-on3j16 - CodeSandbox
strange-gwen-on3j16 using @blueprintjs/core, @blueprintjs/datetime, @blueprintjs/datetime2, @blueprintjs/icons, @blueprintjs/popover2, @blueprintjs/select, react, react-dom
ok, sorry, I thought that the issue was with the scroll bar appearing over the contents... I'll read again and take another look...
no problem
I'm not getting any overlap on Firefox.
I have also checked it on Chrome and see that the scroll overlay is happening there too.
This is what I have, removed some of the styling that the package produces, this seems to work on my version of firefox
112.0.2 https://codesandbox.io/s/vibrant-tree-bv6pbphttps://codesandbox.io/s/lucid-browser-s8sxut?file=/src/index.tsx
open this on chrome
it looks perfect.
I can't seem to get a screen capture showing the scroll (I am on mac) but I do see the scroll bar over the radio buttons.
ugh, so it is not consistent across different operating systems?
wait, you are on mobile?
i think i found a solution
https://codepen.io/MannixMD/pen/mdzvybR
thanks. will look into it later. g2g now
Does 
not resolve the issue?
not resolve the issue?actually i just added display grid and it works lol. look: https://codesandbox.io/s/strange-gwen-on3j16?file=/src/app.css
no f*cking idea why. thought display grid alone has no effect
To be honest I'm can't see that that has made any difference. If I remove it nothing changes. Then again I wasn't seeing the original issue that you were having - I suppose that is due to different OS and browser versions.
However Im sure that the root of the problem here lies in the way that blueprintjs is styling the element - there is no need to use float and contrived margins these days. A simple flex (or grid) on the label would suffice.
i did remove the float
it still doesnt work
but check the last link i shared. i added display grid
that is the one I am looking at
and padding right when in firefox
you have applied display grid to an element that only contains a single div - removing it (on my browser) makes no difference.
are you on mobile?
no
with and without
with this modification. it works on mobile too. both chrome and firefox
I don't doubt that it works on your browser, I am just pointing out that it makes no difference on my browser - that is the problem that you mentioned in the general thread - each browser has differences but also even the same broswer on different devices or versions can change
are you on mac?
yes, as I mentioned earlier
can you show me how it looks right now on your end?
What I was trying to point out is that in this particular case the issues arrise from the way blueprintjs has styled the radio element - if they used modern CSS this wouldn't happen.
one sec....
i understand. i just want to find a trick that can fix this for now. i have other tasks next so i need to move on. if it works on mac then its good enough for me now
(ignore the background color I added and commented out, that was just to see the actual size of the element)
(note - I have sent a video because the scroll bars don't show on a screen capture on the mac, at least not with the built-in capture method)
ok
so theres extra padding on the right which is not needed. but thats with the thin bar
on my mac a right-hand padding of 16px was sufficient.
ironically there is more of an issue with the scroll on Chrome (on mac)
whoops, wrong video.... one sec
scrollbar on Chrome
looks fine or?
I may have missed some of this discussion, but when I looked at one of the codesandbox links, the bulbs were positioned using float, which does all kinds of weird things when abused for anything other than making text flow around images (which is its only intended use). Are you still using that?
yes
blueprint renders that with float
the radio button. but the html structure is strange.
just pointing out that Chrome (on Mac) also has an issue with the scroll bar position but not as bad as the one you were getting on Firefox
im open to suggestions. should i over try remove float?
I would overwrite all the default css for the whole label - they use float, negative margins.... it would be so much easier with a simple flex
opk
ok
my 2 cents here is, if a 3rd party tool (or whatever you want to call it) is using floats for laying things out, if you have the choice to use something else, I would. That's a pretty big red flag imo
@Kevini believe you. it's a honor that you personally reply here. you have much more experience than i do and i can already tell that floats are bad. the main reason i used blueprint is for the controlled radio elements and the bigger/nicer radio buttons
If it's only for the radio button styling, it's pretty easy to do on your own 😄
they render the default input element which has a value attached to it and then hide it behind the label with z-index -1 xD
Also, this is what it looks like for me in FF 😅
yea.. it is very inconsistend.
I just didn’t want to be the one to say it 🤣Here is a really good article on custom radio button styling, if you want to drop blueprint... it's really not that hard 😄 https://moderncss.dev/pure-css-custom-styled-radio-buttons/#custom-radio-button-style
Modern CSS Solutions
Pure CSS Custom Styled Radio Buttons | Modern CSS Solutions
Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states.
i know. i focused on functionality when i first implemented it. but when i started testing on other browsers i figured it may be problematic
whats the deal with firefox hiding the radio buttons behind the scrollbar? i didnt use float this time.. figured grid would be better than floats?
https://codesandbox.io/s/brave-turing-b75tus
anyway i fixed it with padding for now