techinplanet staffAsked By: Anonymous
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>
Solution
Answered By: Anonymous
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.
