Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google MDL: drawer icon not centered

I'm trying the fixed tab example from the Google MDL documentation. Here is my code:

CODE

<!-- Simple header with fixed tabs. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Title</span>
        </div>
        <!-- Tabs -->
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
          <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
          <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout__title">Title</span>
      </div>
      <main class="mdl-layout__content">
        <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-2">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
        <section class="mdl-layout__tab-panel" id="fixed-tab-3">
          <div class="page-content"><!-- Your content goes here --></div>
        </section>
      </main>
    </div>

OUTPUT

Fixed Tabs

The problem is my drawer icon position is wrong! It is aligned to the top instead of center. What is wrong here?

like image 767
bodruk Avatar asked Mar 08 '16 19:03

bodruk


1 Answers

I found this answer and it solved the problem! You need to add the <!DOCTYPE html> to the source and everything will work properly.

like image 147
bodruk Avatar answered Oct 30 '22 21:10

bodruk