MDL-メニュー右下のオフスクリーン

Question

こんにちは私はナビゲーションバーの右側に表示するために次のコードを取得しようとしていますが、半分しか表示されていません。つまり、半分のメニューが正しいです：-32px ; - これはデフォルトのマテリアルデザインライトコードであるCSSを追加していません。

---

---

ERRORはMY CSSにある https://codepen.io/russellharrower/pen/RgMJaR

マイコアgetmdl

<link rel="stylesheet" href="https://getmdl.io/assets/components.css"> 
<script src="https://getmdl.io/assets/components.js"></script> 
<script src="//code.getmdl.io/1.3.0/material.min.js"></script> 

HTMLコード

  <div class="mdl-layout__header-row"> 
       <!-- Title --> 
       <span class="mdl-layout-title">SITE</span></span> 
       <!-- Add spacer, to align navigation to the right --> 
       <div class="mdl-layout-spacer"></div> 
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> 
        <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> 
         <i class="material-icons">search</i> 
        </label> 
        <div class="mdl-textfield__expandable-holder"> 
         <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /> 
        </div> 
       </div> 

       <!-- MDL bottom right Aligned Menu Button --> 
      <button id="my-menu-bottom-right" 
        class="mdl-button mdl-js-button mdl-button--icon"> 
       <i class="material-icons">share</i> 
      </button> 

      <!-- Menu items List , mdl-menu--bottom-right --> 

      <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
       for="my-menu-bottom-right"> 
       <li class="mdl-menu__item">Facebook</li> 
       <li class="mdl-menu__item">Twitter</li> 
       <li disabled class="mdl-menu__item">Google Plus</li> 
      </ul> 

      </div> 

     </header> 

ここでは自動的に生成されるCSSがありますが、これを生成するコードや理由はわかりません。

element.style { 
    right: -35.1563px; 
    top: 40px; 
    width: 124px; 
    height: 160px; 
} 

---

エラーが

.mdl-textfield{width:100% !important;} 

ので、私は（その前にすべてアップのdivのよう#IDを、それ以外の場合ネジ）、それをスタイルする必要がありますが、それをグローバルた.mdl-TextFieldを与えない

ましたメニューの mdl-menu--bottom-rightへ

Answer 1

mdl-menu--bottom-leftul

https://codepen.io/anon/pen/wemXBe

<header class="mdl-layout__header"> 

      <div class="mdl-layout__header-row"> 
       <!-- Title --> 
       <span class="mdl-layout-title">SITE</span></span> 
       <!-- Add spacer, to align navigation to the right --> 
       <div class="mdl-layout-spacer"></div> 
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"> 
        <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp"> 
         <i class="material-icons">search</i> 
        </label> 
        <div class="mdl-textfield__expandable-holder"> 
         <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp" /> 
        </div> 
       </div> 

       <!-- MDL bottom right Aligned Menu Button --> 
       <button id="my-menu-bottom-left" 
         class="mdl-button mdl-js-button mdl-button--icon"> 
        <i class="material-icons">share</i> 
       </button> 

       <!-- Menu items List , mdl-menu--bottom-right --> 
       <!-- mdl-menu--bottom-left to mdl-menu--bottom-right --> 
       <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" 
        for="my-menu-bottom-left"> 
        <li class="mdl-menu__item">Facebook</li> 
        <li class="mdl-menu__item">Twitter</li> 
        <li disabled class="mdl-menu__item">Google Plus</li> 
       </ul> 

      </div> 

     </header>