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

How to close the drawer? #3520

Closed
ktodyruik opened this issue Jan 7, 2016 · 7 comments
Closed

How to close the drawer? #3520

ktodyruik opened this issue Jan 7, 2016 · 7 comments

Comments

@ktodyruik
Copy link

Hi,

I have a question. I click on the menu button to open the drawer and click a menu item. The drawer does not close after clicking an item. Is there a way to configure the menu or trigger the drawer to close after a menu item has been clicked?

Thanks,
Kerry
@surma
Copy link
Contributor

surma commented Jan 7, 2016

You are right, the drawer doesn’t close because usually the drawer contains links causing a full reload.

We have added the toggleDrawer() function and it will ship with 1.1 (probably next week).

With that you can $('.mdl-layout').MaterialLayout.toggleDrawer() in your JS :)

@surma surma closed this as completed Jan 7, 2016
@mariusbutuc
Copy link
Contributor

@surma 1.1 will probably ship next week 🎉 Great news and thank you!

@joshy
Copy link

joshy commented Apr 15, 2016 •
edited

Do I need something special to make this work $('.mdl-layout').MaterialLayout.toggleDrawer()? If I call this I get Uncaught TypeError: Cannot read property 'toggleDrawer' of undefined(…).

I am using version 1.1.3, hosted via google (as described here: http://www.getmdl.io/started/):

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

with a basic body structure

<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <!-- header -->
    </header>
    <div class="mdl-layout__drawer">
      <!-- drawer -->
    </div>
    <main class="mdl-layout__content">
     <!-- main content -->
    </main>
  </div>
</body>

@runningrandall
Copy link

Unfortunately I think this method: $('.mdl-layout').MaterialLayout.toggleDrawer() assumes that you will be using jQuery. I am not. I got it to work by using pure JS. I simply set an ID on my .mdl-layout container and referenced that dom element:

document.getElementById('app').MaterialLayout.toggleDrawer()

Where app was the id of my .mdl-layout container.

@CabuxaMapache
Copy link

Do I need something special to make this work $('.mdl-layout').MaterialLayout.toggleDrawer()? If I call this I get Uncaught TypeError: Cannot read property 'toggleDrawer' of undefined(…).

I am using version 1.1.3, hosted via google (as described here: http://www.getmdl.io/started/):

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

with a basic body structure

<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
  <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <!-- header -->
    </header>
    <div class="mdl-layout__drawer">
      <!-- drawer -->
    </div>
    <main class="mdl-layout__content">
     <!-- main content -->
    </main>
  </div>
</body>

Did you manage to solve this?

@Eskander
Copy link

Did you manage to solve this?

I managed to get it to work by selecting the first element [0] in the jQuery selector:
$('.mdl-layout')[0].MaterialLayout.toggleDrawer()

@saint-lascivious
Copy link

saint-lascivious commented Feb 3, 2023 •
edited

Simple JS only approach (for future visitors):

// mdl-layout__drawer expects links to be external, so it doesn't  bother
// closing itself after click, leaving the drawer hanging open if a navigation
// is directed to an id on the same page
function close_drawer() {
  var d = document.querySelector('.mdl-layout');
  d.MaterialLayout.toggleDrawer();
}

// listen for clicks there and make sure it happens so that page content is
// never hidden by the drawer overlay after navigation
var el = document.querySelector('.mdl-layout__drawer')

if(el){
  el.addEventListener('click', close_drawer);
}

edit: Now with 100% less uncaught exceptions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@joshy @surma @mariusbutuc @saint-lascivious @runningrandall @ktodyruik @CabuxaMapache @Eskander