Geek Answers Handbook

How to make the icon move left on the MDL header?

I tried to set the margin, fill to move the arrow icon back to the left of the title, but failed. How can I do it right?

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!--back arrow--> <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);"> <i class="material-icons">arrow_back</i> </button> <!--Title--> <span class="mdl-layout-title">Settings</span> </div> <!-- Tabs --> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a> <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a> </div>

+5
source share
6 answers

I had the same problem with the back button. There is no visual demonstration in the documents, but after reading the documentation, I found the right way: just put the mdl-layout-icon class on your button.

 <header class="mdl-layout__header"> <button class="mdl-layout-icon mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);"> <i class="material-icons">arrow_back</i> </button> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Some title</span> <div class="mdl-layout-spacer"></div> </div> </header>
+6
source

Try using the 'mdl-layout__drawer-button' class as follows:

 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__drawer-button"><i class="material-icons">arrow_back</i></div> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> </div> </header> <main class="mdl-layout__content"> <div class="page-content"> Content </div> </main> </div>
+3
source

Do you want you to move the arrow icon back to the left side of the header?

like this?

 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <button class="mdl-button mdl-js-button mdl-button--icon" onclick="history.go(-1);"> <i class="material-icons">arrow_back</i> </button> <div class="mdl-layout__header-row"> <!--back arrow--> <!--Title--> <span class="mdl-layout-title">Settings</span> </div> <!-- Tabs --> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="{{pathFor route='home'}}" class="mdl-layout__tab">Profile</a> <a href="{{pathFor route='settings'}}" class="mdl-layout__tab">Account</a> </div>

If the icon is in the class "mdl-layout__header-row",

You cannot move the arrow icon backward by setting the fill box.

You will find out if you do Ctrl + Shift + I on the icon.

You can move the back arrow button to the left of "mdl-layout__header-row" to

setting the icon in the "mdl-layout__header" class.

Hope this helps you :)

0
source 
 <div class="mdl-layout__header-row" style="padding-left: 2%;"> <!--back arrow--> <i class="material-icons" style="margin-right: 5%">arrow_back</i> <!--Title--> <span class="mdl-layout-title">Settings</span> </div>

Try it, I had the same problem and came up with this workaround.

0
source

the anneb solution worked for me, but it is not complete without onclick .

This is a complete solution.

Knowing class="mdl-layout__drawer-button" and history.back() solves the problem.

Add this line

<div class="mdl-layout__drawer-button" onclick="history.back()"><i class="material-icons">arrow_back</i></div>

under mdl-layout__header and above mdl-layout__header-row .

 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__drawer-button" onclick="history.back()"><i class="material-icons">arrow_back</i></div> <div class="mdl-layout__header-row"> <span class="mdl-layout-title">Title</span> </div> </header> <main class="mdl-layout__content"> <div class="page-content"> Content </div> </main> </div>
0
source

Anneb's solution worked for me. However, in order to make it work with every screen size, I had to write some custom CSS (this may be especially typical for my case). I defined my own class .mdl-layout__back-button as follows:

 .mdl-layout--fixed-drawer .mdl-layout__back-button { @extend .mdl-layout__drawer-button; margin-left: 240px; & + .mdl-layout__header-row { padding-left: 72px; } }

This displays the "Back" button even on large screens, where you have no other way to direct the user to the previous page, and you do not want to rely only on them by clicking the "Back" button.

0
source

More articles:


All Articles