arnaudmiribel/streamlit-extras

🐛 [BUG] - Styleable Container does not apply styles any more

Closed this issue · 6 comments

aronweiler commented

Description

The styleable container does not work anymore... not sure what happened, it used to work just fine.

Even in your examples on the streamlit page it isn't working.
https://extras.streamlit.app/Styleable%20Container

Reproduction steps

1. Go to 'https://extras.streamlit.app/Styleable%20Container'
2. Click on 'Styleable Container' on the left nav
3. See that none of the styles specified are applied to the buttons or the container border

Screenshots

Screenshot 2023-09-14 135921

Logs

No response

Version of streamlit

1.25.0

Version of streamlit-extras

0.3.2

arnaudmiribel commented

Hey @aronweiler, thanks for noticing this. Checking in with @lukasmasuch who authored this!

arnaudmiribel commented

Mentioning that the gallery works for me btw 🤔 do you still have an issue?

image
arnaudmiribel commented

What browser are you using? Firefox will probably not work.

aronweiler commented

That might be it, then.. I'm on Firefox. Do some of these things not work with Firefox? I will admit I don't know much about CSS / Javascript and compatibility issues.

arnaudmiribel commented

The styleable container uses the :has() CSS property which is still behind a feature flag in Firefox, unfortunately. Closing this for now.

aronweiler commented

FYI, in case anyone wants to know how to fix this in FireFox, you can perform the following:

  1. Open Firefox.
  2. Type about:config in the address bar and press Enter.
  3. Click "Accept the Risk and Continue" to access the advanced settings.
  4. Use the search bar at the top to find the setting for enabling experimental features. This might be something like layout.css.has-selector.enabled.
  5. If you find the relevant setting for :has(), click on the toggle button to set its value to true.
  • 👍1