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
Mannix
Mannix•2y ago
this is what i see in firefox
Mannix
Mannix•2y ago
pretty much same in chrome
Silvershot
Silvershot•2y ago
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
Mannix
Mannix•2y ago
still the same
Silvershot
Silvershot•2y ago
show me>?
Mannix
Mannix•2y ago
Silvershot
Silvershot•2y ago
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. "
Mannix
Mannix•2y ago
Silvershot
Silvershot•2y ago
wtf?
Silvershot
Silvershot•2y ago
Silvershot
Silvershot•2y ago
what sorcery is this?
Mannix
Mannix•2y ago
my scrollbar is thinner when i change it does look like yours
Silvershot
Silvershot•2y ago
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
Mannix
Mannix•2y ago
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
Silvershot
Silvershot•2y ago
i dont use float i use flexbox the blueprintjs radiogroup/radio applies floats etc.
Mannix
Mannix•2y ago
that's my point don't use float to put the radio button on the right side
Silvershot
Silvershot•2y ago
if i modify it like this. https://codesandbox.io/s/strange-gwen-on3j16 it hides behind the scrollbar
Silvershot
Silvershot•2y ago
look how nice it is on chrome.
Chris Bolson
Chris Bolson•2y ago
You could add a right padding on the names-list element to allow for the scrollbar.
@-moz-document url-prefix() {
.names-list{
padding-right:16px;
}
}
@-moz-document url-prefix() {
.names-list{
padding-right:16px;
}
}
Silvershot
Silvershot•2y ago
is it possible to apply styles only for firefox ?
Chris Bolson
Chris Bolson•2y ago
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() {
Silvershot
Silvershot•2y ago
your solution only makes the list wider, but it doesnt push the radio further to the right
Silvershot
Silvershot•2y ago
CodeSandbox
strange-gwen-on3j16 - CodeSandbox
strange-gwen-on3j16 using @blueprintjs/core, @blueprintjs/datetime, @blueprintjs/datetime2, @blueprintjs/icons, @blueprintjs/popover2, @blueprintjs/select, react, react-dom
Chris Bolson
Chris Bolson•2y ago
ok, sorry, I thought that the issue was with the scroll bar appearing over the contents... I'll read again and take another look...
Silvershot
Silvershot•2y ago
no problem
Chris Bolson
Chris Bolson•2y ago
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.
Gashy
Gashy•2y ago
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-bv6pbp
Silvershot
Silvershot•2y ago
it looks perfect.
Chris Bolson
Chris Bolson•2y ago
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.
Silvershot
Silvershot•2y ago
ugh, so it is not consistent across different operating systems? wait, you are on mobile?
Mannix
Mannix•2y ago
i think i found a solution https://codepen.io/MannixMD/pen/mdzvybR
Silvershot
Silvershot•2y ago
thanks. will look into it later. g2g now
Chris Bolson
Chris Bolson•2y ago
Does this not resolve the issue?
Silvershot
Silvershot•2y ago
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
Chris Bolson
Chris Bolson•2y ago
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.
Silvershot
Silvershot•2y ago
i did remove the float it still doesnt work but check the last link i shared. i added display grid
Chris Bolson
Chris Bolson•2y ago
that is the one I am looking at
Silvershot
Silvershot•2y ago
and padding right when in firefox
Chris Bolson
Chris Bolson•2y ago
you have applied display grid to an element that only contains a single div - removing it (on my browser) makes no difference.
Silvershot
Silvershot•2y ago
are you on mobile?
Chris Bolson
Chris Bolson•2y ago
no
Silvershot
Silvershot•2y ago
Silvershot
Silvershot•2y ago
Silvershot
Silvershot•2y ago
with and without with this modification. it works on mobile too. both chrome and firefox
Chris Bolson
Chris Bolson•2y ago
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
Silvershot
Silvershot•2y ago
are you on mac?
Chris Bolson
Chris Bolson•2y ago
yes, as I mentioned earlier
Silvershot
Silvershot•2y ago
can you show me how it looks right now on your end?
Chris Bolson
Chris Bolson•2y ago
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....
Silvershot
Silvershot•2y ago
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
Chris Bolson
Chris Bolson•2y ago
(ignore the background color I added and commented out, that was just to see the actual size of the element)
Chris Bolson
Chris Bolson•2y ago
(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)
Silvershot
Silvershot•2y ago
ok so theres extra padding on the right which is not needed. but thats with the thin bar
Chris Bolson
Chris Bolson•2y ago
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
Chris Bolson
Chris Bolson•2y ago
scrollbar on Chrome
Silvershot
Silvershot•2y ago
looks fine or?
Jochem
Jochem•2y ago
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?
Silvershot
Silvershot•2y ago
yes blueprint renders that with float the radio button. but the html structure is strange.
Chris Bolson
Chris Bolson•2y ago
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
Silvershot
Silvershot•2y ago
im open to suggestions. should i over try remove float?
Chris Bolson
Chris Bolson•2y ago
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
Silvershot
Silvershot•2y ago
opk ok
Kevin Powell
Kevin Powell•2y ago
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
Silvershot
Silvershot•2y ago
@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
Kevin Powell
Kevin Powell•2y ago
If it's only for the radio button styling, it's pretty easy to do on your own 😄
Silvershot
Silvershot•2y ago
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
Kevin Powell
Kevin Powell•2y ago
Also, this is what it looks like for me in FF 😅
Silvershot
Silvershot•2y ago
yea.. it is very inconsistend.
Chris Bolson
Chris Bolson•2y ago
this I just didn’t want to be the one to say it 🤣
Kevin Powell
Kevin Powell•2y ago
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.
Silvershot
Silvershot•2y ago
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
Want results from more Discord servers?
Add your server