Skip to content

Avoid using non-namespaced CSS classes on the host element #413

Open
@laymonage

Description

@laymonage

Hey all.

I've spent a few hours debugging why we're not seeing the notifications for old versions and PR builds with the new Notification add-on. It turns out that the element is there, but Bootstrap (which our theme uses) hides it because it has the toast class:

hidden notification element due to opacity:0 set by bootstrap

See the opacity: 0; at the bottom right of the screenshot. That comes from Bootstrap, and it requires toast to be initialised via JS (hence the initial state has opacity: 0;). You can check here: https://sphinx-wagtail-theme--295.org.readthedocs.build/en/295/

Debugging this was quite hard because the notification immediately disappears after 5s. I had to overwrite the JS and increase the timeout to investigate this.

Is there a reason why the custom element needs to rely on CSS classes in the host element? Could you perhaps use something else, e.g. data attributes?

Or, if you want to use CSS classes, I think they should be namespaced, e.g. prefixed with rtd- so that it doesn't conflict with the theme's CSS (and can still be overridden if that's the desired goal).

Thanks!

P.s. love the addons – DocDiff in particular is really awesome.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Planned

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions