서랍이 MDL로 열려있을 때 콘텐츠 크기 조정

Question

MDL을 기반으로 한 웹 사이트를 구축 중입니다. 내가 성취하고자하는 것은 서랍이 내용 위로 열리지 않고 그 옆에서 열리는 것입니다. obfuscator를 비활성화하고 top 값을 수정했습니다.

그러나이 방법은 서랍에서 콘텐츠 영역을 열 때마다 왼쪽 여백이 250 픽셀 (여백은 250 픽셀)이고 너비는 크기가 width: calc(100% - 250px)이되도록 조정합니다. 이것은 잘 작동하지만, 이것이 최선의 방법인지는 모르겠다. 그렇더라도 서랍의 상태를 어떻게 추적해야할지 모르겠다.

다음은 material.js 변경 사항을 처리하는 방법은 다음과 같습니다 내 능력이 실제로 무슨 일이 일어나고 있는지 알아 내기 위해 넘어

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

이입니다. 크롬으로 추적 해 보았지만 너무 복잡했습니다.

간단한 방법이 있나요? 그렇지 않으면 스크립트를 어떻게 편집합니까?

건배!

Answer 1

.mdl-layout__drawer은 공개/가시화 될 때 .is-visible 클래스를받습니다. 이 작은 CSS-규칙은 나를 위해 일한 :

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

당신이 여백하지만 패딩을 사용하지 않는 당신이 또한 내용 영역의 폭을 고정 할 필요가 없습니다두고. 기본적으로 material.css는 서랍이 보이면 스크롤을 사용 중지하므로 규칙에 overflow-property를 추가해야합니다.

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