Simple Sidebar Template Trouble

bretonio commented 6 years ago

Test Case

Codepen is new to me — I will paste code below

Summary

Tested in Chrome and Firefox and cloned from your raw HTML and translated to Pug, the standard drawer template for BMD is not working for me on Arch Linux. Compiled and served with Express JS.

The navbar and drawer collapse correctly and the buttons exhibit the ripple effect and when expanded to a desktop screen size the side-nav appears on the left margin as it is coded to be.

I have checked that my layout.pug file processes the JS dependencies correctly just before </body> and it does, in the correct order. That markup:


    body
        block content

        block scripts
            script(type='text/javascript', src='https://code.jquery.com/jquery-3.1.0.min.js')
            script(type='text/javascript', src='https://cdn.rawgit.com/HubSpot/tether/v1.3.4/dist/js/tether.min.js')
            script(type='text/javascript', src='https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/dist/dist/bootstrap-material-design.iife.min.js')
            script(type='text/javascript', src='https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js')

        script.
            $(function() {
            $('body').bootstrapMaterialDesign();
            })

I am using a CDN version of the stylesheets but will try configuring with the NPM version as time permits

Expected result

Expected was behavior corresponding with the example page which was closely followed in attempting my own version of that layout.

Additional Information

For your reference, my Pug markup and a screenshot attached. Thanks! 111-github-drawer

    .bmd-layout-container.bmd-drawer-f-l.bmd-drawer-overlay-md-down.bmd-drawer-in-lg-up
        header.bmd-layout-header
            .navbar.navbar-light.bg-faded
                button.navbar-toggler.hidden-lg-up(type='button', data-toggle='drawer', data-target='#dw-1')
                    span.sr-only Toggle drawer
                    i.material-icons menu
                ul.nav.navbar-nav
                    li.nav-item 
                        i.fa.fa-gears.fa-lg
                        | &nbsp; Engenho Novo LLC
                ul.nav.navbar-nav.pull-xs-right
                    li.nav-item
                        .bmd-form-group.bmd-collapse-inline.pull-xs-right
                            button.btn.bmd-btn-icon(for='search', data-toggle='collapse', data-target='#collapse-search-1', aria-controls='collapse-search-1')
                                i.material-icons search
                            span#collapse-search-1.collapse
                                input#search.form-control(type='text', placeholder='Enter your query...')
                    li.nav-item
                        .dropdown
                            button#more-menu-1.btn.bmd-btn-icon.btn-secondary.dropdown-toggle(type='button', data-toggle='dropdown', aria-haspopup='true')
                                i.material-icons more_vert
                            .dropdown-menu.dropdown-menu-right(aria-labelledby='more-menu-1')
                                button.dropdown-item(type='button') Sobre Nós
                                button.dropdown-item(type='button') Sobre Nossos Gatos
                                button.dropdown-item(type='button') Sobre a Samboja
        #dw-1.bmd-layout-drawer.bg-faded
            header
                a.navbar-brand
                    p.text-center
                        i.fa.fa-gears.fa-4x
            ul.list-group
                a.list-group-item
                    i.material-icons(role='presentation') autorenew
                    | Whirlpool
                a.list-group-item
                    i.material-icons(role='presentation') loop
                    | Maytag
                a.list-group-item
                    i.material-icons(role='presentation') touch_app
                    | Electrolux
                a.list-group-item
                    i.material-icons(role='presentation') visibility
                    | Dyson
                a.list-group-item
                    i.material-icons(role='presentation') view_quilt
                    | Osterizer
                a.list-group-item
                    i.material-icons(role='presentation') mic_none  
                    | Sub-Zero
        main.bmd-layout-content
            .container
                .jumbotron
                    h1 Adeus, Mundo Imundo

FezVrasta commented 6 years ago

Hi, without a CodePen example I can't help you.

bretonio commented 6 years ago

Will try to get to it. New to Codepenning.

thx cb

On Thu, Oct 12, 2017 at 12:48 PM, Federico Zivolo notifications@github.com wrote:

Hi, without a CodePen example I can't help you.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/FezVrasta/bootstrap-material-design/issues/1245#issuecomment-336179814, or mute the thread https://github.com/notifications/unsubscribe-auth/ATmAq5PDbH5SefvbgR2fRQqVbw0myvJhks5srjTjgaJpZM4P3Gil .

mdbootstrap / mdb-ui-kit