Skip to content
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.

Sign up for GitHub

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

Jump to bottom

v5 Offcanvas: Not visible on page load with show class #33372

Closed
iainhallam opened this issue Mar 15, 2021 · 3 comments · Fixed by #33382
Closed

v5 Offcanvas: Not visible on page load with show class #33372

iainhallam opened this issue Mar 15, 2021 · 3 comments · Fixed by #33382
Labels
has-pr js v5

Comments

@iainhallam
Copy link

Operating system and version: Windows 10
Browser and version: Firefox 86.0 and Chome 89.0.4389.82

I'm trying out the new offcanvas component, which is great, but when I have show as part of the initial classes, the menu doesn't open on page load. It may be something I'm doing wrong, but I think I've followed the setup correctly for the current Bootstrap from GitHub.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.css">
        <title>Offcanvas test</title>
    </head>
    <body>
        <div id="app-menu" class="offcanvas offcanvas-start show">
            <h2>Offcanvas</h2>
        </div>
        <button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#app-menu">
            Open menu
        </button>
        <script src="js/bootstrap.bundle.js"></script>
    </body>
</html>

Expected behaviour: On load, the offcanvas is opened, and the document obscured by the overlay.

Actual behaviour: No offcanvas shown. Clicking the button the first time does nothing (it toggles the show class off), then the second time it shows the offcanvas and the document is obscured.

Moving the script tag to the top of the document or into the head seems to make no difference.
@XhmikosR
Copy link
Member

/CC @GeoSot

@GeoSot
Copy link
Member

GeoSot commented Mar 16, 2021

@iainhallam please can you attach a living example that replicates the issue?

@iainhallam
Copy link
Author

iainhallam commented Mar 16, 2021 •
edited
Loading

https://codepen.io/iainhallam/pen/XWNQZRV replicates for me. The CSS (bootstrap.css) and JS (bootstrap.bundle.js) in that are taken from the dist/ directory of a Git checkout of main at commit e153e5f5b2b82ad09a9874b8ff1dfca986790f76 after running npm run dist. The show class is present in the HTML, but the offcanvas isn't shown until the button has been clicked twice to remove the class then re-add it again.

@GeoSot GeoSot mentioned this issue Mar 16, 2021
Merged
@mdo mdo added the has-pr label Mar 17, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
has-pr js v5
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow offcanvas to be initialized in open state twbs/bootstrap
4 participants
@mdo @iainhallam @XhmikosR @GeoSot