6

I tried setting the margin,padding to move the back-arrow icon to the left of the header but failed. How should I make this correct?

<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>

sammkj
  • 177
  • 2
  • 10

6 Answers6

11

I had the same problem with the back button. There is no visual demo in the docs, but reading the documentation I found the right way of doing so: just put a class mdl-layout-icon 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>
val
  • 793
  • 6
  • 21
4

Try to use class 'mdl-layout__drawer-button' like this:

<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>
anneb
  • 5,510
  • 2
  • 26
  • 26
  • 1
    I think this should be the accepted answer. It's clearly what the MDL designers intended. – Adam Mar 07 '17 at 20:54
0

You mean you want to move back arrow icon to the left part 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 can't move the back arrow icon by setting margin,padding.

You will know if you do Ctrl + Shift + I to the icon.

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

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

I hope it helps you :)

nujabes
  • 891
  • 2
  • 8
  • 17
0
<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 this, I had the same problem and came up with this workaround.

Federico Capello
  • 1,088
  • 3
  • 12
  • 21
0

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

This is the full solution.

Knowledge of 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>
mythicalcoder
  • 3,143
  • 1
  • 32
  • 42
0

anneb's solution worked for me. However, to make it work on every screen size I had to write some custom CSS (this may be specific to my case though). I defined my own .mdl-layout__back-button class as follow:

.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 of directing the user to the previous page and you don't want to rely only on them hitting the browser's back button.

Aaron
  • 145
  • 1
  • 6