5

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?

bodruk
  • 3,242
  • 8
  • 34
  • 52
  • Possible duplicate of [Material Design Lite hamburger menu not centered in header](http://stackoverflow.com/questions/33793815/material-design-lite-hamburger-menu-not-centered-in-header) – bodruk Mar 08 '16 at 22:40

1 Answers1

10

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

Community
  • 1
  • 1
bodruk
  • 3,242
  • 8
  • 34
  • 52