-
-
Notifications
You must be signed in to change notification settings - Fork 54
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Responsive Offcanvas requires suppressing class="offcanvas" #849
Comments
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 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: I will see if I can do a PR for this. |
…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.
@SerratedSharp Were you able to replicate this issue here: https://demos.blazorbootstrap.com/offcanvas#sizes? 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: