You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To Reproduce <Offcanvas class="offcanvas-lg"> produces class="offcanvas offcanvas-lg" which breaks the responsiveness(showing content on page above breakpoint) and also makes the offcanvas transparent(when page width is above breakpoint and offcanvas is shown).
Screenshots
How the bug looks when larger than breakpoint and offcanvas shown:
Proposed Solution
Verified fix by inheriting from Offcanvas and overriding ClassNames to allow the default class to be disabled:
The only remaining problem is this line is hardcoded to expect a class "offcanvas" and so it breaks the dismiss button when class is suppressed. data-bs-dismiss="offcanvas" would need to be adjusted.
Looks like the dismiss issue is an unrelated known issue that cropped as a result of not including the default class(which this issue confirms ommitted the default offcanvas class is a normal part of implementing the responsive offcanvas. Known issue in BS:
This is a jsfiddle showing a properly implemented responsive offcanvas which uses the data-bs-target workaround for the close button issue when the default class is not present: https://jsfiddle.net/7yvdL5p4/1/
I will see if I can do a PR for this.
SerratedSharp
added a commit
to SerratedSharp/blazorbootstrap
that referenced
this issue
Aug 26, 2024
…ault "offcanvas" class following BS docs for responsive offcanvas.
- Includes recommended workaround for dismiss button where the default class is ommitted for this scenario per twbs/bootstrap#36962
- Added example to demos for this scenario.
Tested using Demo.WebASsembly project.
If you were able to replicate the issue, please attach a screen recording.
Per my analysis, this is working as expected, but it was handled slightly differently in the past. We are applying different CSS classes when different sizes are applied.
Propose to add an EnableDefaultClass parameter property that allows the default class to be suppressed as needed.
Describe the bug
Responsive offcanvas
offcanvas-lg
should not haveclass="offcanvas"
per this example: https://getbootstrap.com/docs/5.3/components/offcanvas/#responsiveTo Reproduce
<Offcanvas class="offcanvas-lg">
producesclass="offcanvas offcanvas-lg"
which breaks the responsiveness(showing content on page above breakpoint) and also makes the offcanvas transparent(when page width is above breakpoint and offcanvas is shown).Screenshots

How the bug looks when larger than breakpoint and offcanvas shown:
Proposed Solution
Verified fix by inheriting from Offcanvas and overriding ClassNames to allow the default class to be disabled:
The only remaining problem is this line is hardcoded to expect a class "offcanvas" and so it breaks the dismiss button when class is suppressed.
data-bs-dismiss="offcanvas"
would need to be adjusted.Usage:
<OffcanvasEx @ref="offcanvas" EnableDefaultClass="false" class="offcanvas-lg">
Versions (please complete the following information):
The text was updated successfully, but these errors were encountered: