Label for moving Lite materials (MDL) on the right side

Question

I am using Google Material Design Lite (MDL) for the web and I can’t place the navigation box on the right side. The documentation does not contain information on how to do this. Is it possible?

The default box always goes to the left.

<header class="custom-header mdl-layout__header mdl-layout__header--waterfall"> <div class="mdl-layout__drawer-button"> <i class="material-icons">menu</i> </div> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">My App</span> </div> </header> <div class="mdl-layout__drawer"> drawer contents... </div> 

Answer 1

There is actually no right way to do this, but there is a workaround.

First, we have to rewrite the position of the drawer button, and then place it on the entire drawer so that it appears on the right. Then we need to fix the animation of the box.

Include the following style tag after mdl-layout__header .

 <header class="custom-header mdl-layout__header mdl-layout__header--waterfall"> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">My App</span> </div> </header> <div class="mdl-layout__drawer"> drawer contents... </div> <style> .mdl-layout__drawer-button, .mdl-layout__drawer{ left: initial; right: 0; } .mdl-layout__drawer{ transform:translateX(250px); } </style> 

Answer 2

Here is the work that I developed. Hope this is helpful. Looking for your thoughts and your advice for further improvement.

https://jsfiddle.net/VamosErik88/HTHnW/651/

 <style> .mdl-layout__drawer-right { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 240px; height: 100%; max-height: 100%; position: absolute; top: 0; right: 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); box-sizing: border-box; border-right: 1px solid #e0e0e0; background: #fafafa; -webkit-transform: translateX(250px); -ms-transform: translateX(250px); transform: translateX(250px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1); transition-timing-function: cubic-bezier(.4,0,.2,1); -webkit-transition-property: -webkit-transform; transition-property: transform; color: #424242; overflow: visible; overflow-y: auto; z-index: 5; } .active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .mdl-layout__obfuscator-right { background-color: transparent; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 4; visibility: hidden; -webkit-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1); transition-timing-function: cubic-bezier(.4,0,.2,1); } .mdl-layout__drawer-right.active~.mdl-layout__obfuscator-right { background-color: rgba(0,0,0,.5); visibility: visible; } .mdl-layout__drawer-right>.mdl-layout-title { line-height: 56px; padding-left: 16px; } </style> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Title</span> <!-- Add spacer, to align navigation to the right --> <div class="mdl-layout-spacer"></div> <!-- Navigation --> <div class="material-icons mdl-badge" id="notif" data-badge="5">notifications</div> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">Title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> <a class="mdl-navigation__link" href="">Link</a> </nav> </div> <div class="mdl-layout__drawer-right"> <span class="mdl-layout-title">Notifications</span> </div> <main class="mdl-layout__content"> </main> <div class="mdl-layout__obfuscator-right"></div> </div> <script> $('#notif').click(function(){ if($('.mdl-layout__drawer-right').hasClass('active')){ $('.mdl-layout__drawer-right').removeClass('active'); } else{ $('.mdl-layout__drawer-right').addClass('active'); } }); $('.mdl-layout__obfuscator-right').click(function(){ if($('.mdl-layout__drawer-right').hasClass('active')){ $('.mdl-layout__drawer-right').removeClass('active'); } else{ $('.mdl-layout__drawer-right').addClass('active'); } }); </script>