Größe ändern Inhalt, wenn Schublade in MDL geöffnet ist

Question

Ich baue eine Website auf MDL basiert. Was ich versuche zu erreichen ist, dass die Schublade sich nicht über den Inhalt öffnet, sondern daneben öffnet. Ich schaffte es, den Obfuscator zu deaktivieren und den Wert top zu ändern.

Die Art, wie ich dies tun würde, ist jedoch immer die Schublade öffnet den Inhaltsbereich würde einen 250px breiten linken Rand bekommen (die Schublade ist 250px breit) und seine Breite so ändern, dass width: calc(100% - 250px). Das funktioniert ganz gut, aber ich weiß nicht, ob dies der beste Weg ist, und selbst wenn, weiß ich nicht, wie ich den Zustand der Schublade verfolgen soll.

Hier ist, wie die material.js die Änderung Griffe:

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); 
     } 
    } 
}; 

Das ist jenseits meiner Fähigkeiten herauszufinden, was eigentlich los ist. Ich habe versucht, es mit Chrome nachzuverfolgen, aber es war zu kompliziert.

Gibt es einen einfachen Weg, dies zu tun? Wenn nicht, wie bearbeite ich das Skript?

Prost!

Answer 1

Die .mdl-layout__drawer erhält eine Klasse, wenn es offen/sichtbar ist. Dieses kleine CSS-Regel für mich gearbeitet:

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

Damit Sie brauchen auch nicht die Breite des Inhalt-Bereich zu beheben, da Sie nicht Rand verwenden aber Polsterung. Beachten Sie, dass die material.css standardmäßig auch das Scrollen deaktiviert, wenn die Schublade sichtbar ist. Daher müssen Sie der Regel auch die Überlaufeigenschaft hinzufügen: