title: MDL-Menu bottom right offscreen
body: <p>Hi I am trying to get the following code to show on the right side of the nav-bar however when I do it is only showing half (in other words half the menu is right:-32px; - I have not added any CSS this is the default material design lite code).</p>
  
  <hr>
  
  <hr>
  
  <p>THE ERROR IS IN MY CSS
  <a href="https://codepen.io/russellharrower/pen/RgMJaR" rel="nofollow noreferrer">https://codepen.io/russellharrower/pen/RgMJaR</a></p>
  
  <p>My core getmdl</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://getmdl.io/assets/components.css"&gt;
  &lt;script src="https://getmdl.io/assets/components.js"&gt;&lt;/script&gt;
  &lt;script src="//code.getmdl.io/1.3.0/material.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>HTML CODE
      </p>
  
  <pre><code>            &lt;div class="mdl-layout__header-row"&gt;
                  &lt;!-- Title --&gt;
                  &lt;span class="mdl-layout-title"&gt;SITE&lt;/span&gt;&lt;/span&gt;
                  &lt;!-- Add spacer, to align navigation to the right --&gt;
                  &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                  &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"&gt;
                      &lt;label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"&gt;
                          &lt;i class="material-icons"&gt;search&lt;/i&gt;
                      &lt;/label&gt;
                      &lt;div class="mdl-textfield__expandable-holder"&gt;
                          &lt;input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                   &lt;!-- MDL bottom right Aligned Menu Button --&gt;  
               &lt;button id="my-menu-bottom-right"
                      class="mdl-button mdl-js-button mdl-button--icon"&gt;
                &lt;i class="material-icons"&gt;share&lt;/i&gt;
              &lt;/button&gt;
  
              &lt;!-- Menu items List , mdl-menu--bottom-right --&gt;
  
              &lt;ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                  for="my-menu-bottom-right"&gt;
                &lt;li class="mdl-menu__item"&gt;Facebook&lt;/li&gt;
                &lt;li class="mdl-menu__item"&gt;Twitter&lt;/li&gt;
                &lt;li disabled class="mdl-menu__item"&gt;Google Plus&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;/div&gt;
  
          &lt;/header&gt; 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LzRKc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LzRKc.jpg" alt="mdl-menu"></a></p>
  
  <p>here is the CSS that gets generated automatically I am not sure what code generates this or why.</p>
  
  <pre><code>element.style {
      right: -35.1563px;
      top: 40px;
      width: 124px;
      height: 160px;
  }
  </code></pre>
  
  <hr>
  
  <p>error was</p>
  
  <pre><code>.mdl-textfield{width:100% !important;}
  </code></pre>
  
  <p>so I need to style it but NOT give it a global .mdl-textfield (otherwise it screws everything up so #id of div before that)</p>