引き出しがMDLで開いているときにコンテンツのサイズを変更

Question

MDLに基づいてウェブサイトを構築しています。私が達成しようとしているのは、引き出しがコンテンツ上で開いていないが、隣に開いていることです。私はobfuscatorを無効にしてtopの値を変更することができました。

しかし、これを行う方法は、コンテンツ領域が250px幅の左余白（幅250px）を取得し、幅を調整してwidth: calc(100% - 250px)となるようにするときです。これはうまく動作しますが、これが最良の方法であるかどうかはわかりません。たとえそれがあったとしても、引き出しの状態をどのように追跡するかわかりません。

MaterialLayout.prototype.screenSizeHandler_ = function() { 
    if (this.screenSizeMediaQuery_.matches) { 
     this.element_.classList.add(this.CssClasses_.IS_SMALL_SCREEN); 
    } else { 
     this.element_.classList.remove(this.CssClasses_.IS_SMALL_SCREEN); 
     // Collapse drawer (if any) when moving to a large screen size. 
     if (this.drawer_) { 
      this.drawer_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); 
      this.obfuscator_.classList.remove(this.CssClasses_.IS_DRAWER_OPEN); 
     } 
    } 
}; 

これが実際に起こっているかを把握するために自分のスキルを超えて：ここでは

はmaterial.jsが変更をどのように処理するかです。私はChromeでそれを追跡しようとしましたが、複雑すぎました。

これを実行する簡単な方法はありますか？そうでない場合は、スクリプトをどのように編集しますか？

乾杯！

Answer 1

.mdl-layout__drawerは、オープン/可視のときに.is-visibleクラスを受け取ります。 この小さなCSSルールは、私の仕事：

これにより

.mdl-layout__drawer.is-visible ~ .mdl-layout__content { 
    padding-left: 250px; 
} 

あなたは余裕が、パディングを使用していないとして、あなたはまた、コンテンツ領域の幅を修正する必要はありません。デフォルトでは、引き出しが表示されているときにも、material.cssはスクロールを無効にするので、ルールにオーバーフロープロパティを追加する必要があります。

.mdl-layout__drawer.is-visible ~ .mdl-layout__content { 
    overflow: auto !important; 
    padding-left: 250px; 
}