Skip to content
GitLab
Closed
Issue created by Administrator@rootContributor

v5 Offcanvas: Not visible on page load with show class

Created by: iainhallam

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.