CODEWITHSUNDEEP
htmlpolymermaterial-design
user4191537
user4191537

Reputation: 213

Core-drawer-panel closed on large screens as well?

I'm building my first polymer/material design webapp. In it, I'm using a core-drawer-panel. It's normal behaviour is that it is opened on large screens, but I want it to behave the same on large screens as on small screens. Is this possible?

<body>

    <core-drawer-panel id="drawerPanel" rightDrawer>

        <core-header-panel drawer>

            <core-toolbar id="navheader'">

                <span>Menu</span>

            </core-toolbar>

            <core-menu>

                <core-item label="One"></core-item>
                <core-item label="Two"></core-item>

            </core-menu>

        </core-header-panel>

        <core-header-panel main>

        </core-header-panel>

    <core-drawer-panel>

<body>

Upvotes: 1

Views: 526

Answers (2)

Jabberwockey
Jabberwockey

Reputation: 493

This has already been answered with the newer forceNarrow attribute, but I think there is some distinction still that needs to be made with the default behavior.

When using forceNarrow on larger screens, you can still toggle the drawer open with the togglePanel() method, but this still behaves like it would on smaller screens by creating a drawer overlay. 

<core-drawer-panel id="drawer" forceNarrow="true">
<div drawer></div>
<div main></div>
</core-drawer-panel>

<script>
...
//  This creates drawer overlay on top of and covering the main content
openDrawer: function(){
    this.$.drawer.togglePanel();
}
</script>

This overlay is annoying with a large screen, because the overlays are typically used to conserve space on smaller screens, and you may want to see the entire main area when selecting from a drawer.

If you want the main content to resize with the new drawer, try this with polymer:

<core-drawer-panel id="drawer" forceNarrow="{{drawerNarrow}}">
<div drawer></div>
<div main></div>
</core-drawer-panel>

<script>
...
//  This resizes the main content to accommodate the drawer
drawerNarrow: true,
openDrawer: function(){
    this.drawerNarrow = !this.drawerNarrow
}
</script>

This allows you to load the closed drawer on larger screens, and then resizes all of the content on the larger screen when you open it.

Upvotes: 0

Hassan Hayat
Hassan Hayat

Reputation: 1065

UPDATE:

In the latest release of the polymer core elements (0.5.0), there's a new attribute you can set to <core-drawer-panel>which is forceNarrowwhich forces the panel to always be narrow no matter what width or responsive width it deals with.

If this is what you need, just do this:

<core-drawer-panel forceNarrow>...</core-drawer-panel>


ORIGINAL ANSWER:

You can try changing the responsiveWidth attribute to something absurdly large.

The responsiveWidth attribute specifies at what width do you want the core-drawer-panel to be opened by default.

Example:

<core-drawer-panel responsiveWidth="500px">...</core-drawer-panel>

This means that above 500px the core-drawer-panel will be open and below 500px the panel will be closed and you'll have to toggle it on and off either by swiping or pressing a menu button you hooked onto it.

Upvotes: 2

Related Questions