fix(toolbar, card): resolve styling conflicts when offcanvas is used as a toolbar trigger#1329
Merged
Conversation
…styling The toolbar's `& *` font-size rule and `& > *` layout overrides (margin-bottom, width, align-self) were leaking into a nested bslib-offcanvas panel and its .offcanvas-backdrop. Both land as DOM children of the toolbar when offcanvas() is used as a toolbar trigger, since Bootstrap inserts the backdrop into the offcanvas element's parentNode and bslib places the panel as a sibling of its trigger. This shrank the offcanvas panel's text and broke its width (both for the panel itself and its backdrop, which needs 100vw).
…open A bslib-offcanvas panel is visually a page-level overlay, but it stays a DOM descendant of the card it's wired from (e.g. via a toolbar trigger in the card header). Hovering the open panel therefore bubbles up and triggers the card's :hover state, revealing the full-screen enter button on top of it, since the button's z-index (popover) is higher than the offcanvas's.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Follow up to #1328
Fixes two CSS issues discovered while adding an example that uses an offcanvas as a card-header toolbar trigger.
Fixes
width: auto,align-self: center,margin-bottom: 0) were leaking into a nestedoffcanvas()panel and its backdrop, since both land as DOM children of the toolbar when offcanvas is used as a toolbar trigger. This broke the panel's font size and the width of both the panel and its backdrop.:hoverstate, revealing the button — whose z-index is higher than the offcanvas's.