在MDL中打开抽屉时调整内容大小

Question

I'm building a website based on MDL. What I'm trying to achieve is that the drawer doesn't open over the content, but open next to it. I managed to disable the obfuscator and modify the top value.

However, the way I was going to do this is anytime the drawer opens the content area would get a 250px wide left margin (the drawer is 250px wide) and resize its width so that width: calc(100% - 250px) . This works just fine, but I don't know if this is the best way to do it, and even if it is, I don't know how to track the state of the drawer.

Here's how the material.js handles the change:

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

This is beyond my skills to figure out what is actually going on. I tried tracking it down with Chrome, but it was too complicated.

Is there a trivial way to do this? If not, how do I edit the script?

Cheers!

Answer 1

The .mdl-layout__drawer receives a .is-visible class when it is open/visible. This small CSS-Rule worked for me:

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

With this you also don't need to fix the width of the content-area, as you are not using margin but padding. Note that by default the material.css also disables scrolling when the drawer is visible, so you also need to add the overflow-property to the rule:

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