search

arnaudmiribel / streamlit-extras

Discover, try, install and share Streamlit re-usable bits we call "extras"!
https://extras.streamlit.app
Apache License 2.0
715 stars 123 forks source link

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

Closed aronweiler closed 11 months ago

aronweiler commented 11 months ago

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 11 months ago

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

arnaudmiribel commented 11 months ago

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

image
arnaudmiribel commented 11 months ago

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

aronweiler commented 11 months ago

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 11 months ago

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

aronweiler commented 8 months ago

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.