Having problems changing the default width of the <core-drawer-panel>
I started playing with Polymer a few days ago and I still understand it well, but now I am facing a problem. I tried to change the default width, but I was unable to get the desired result. I first tried to change the width in css with just these changes:
#navheader {
background-color: #56BA89;
}
core-drawer-panel .transition > #main{
left:100px!important;
}
core-drawer-panel .transition > #drawer{
width:100px!important;
}
core-drawer-panel .narrow-layout > #drawer:not(.core-selected){
width:100px!important;
}
and here is the html part:
<core-scaffold>
<core-header-panel navigation flex>
<core-toolbar id="navheader">
<span>Menu</span>
</core-toolbar>
<core-menu>
<core-item label="One"></core-item>
<core-item label="Two"></core-item>
<core-item label="Three"></core-item>
<core-item label="Four"></core-item>
<core-item label="Five"></core-item>
<core-item label="Six"></core-item>
<core-item label="Seven"></core-item>
</core-menu>
</core-header-panel>
<span tool>Title</span>
<div class="content">
If drawer is hidden, press button to display drawer.
</div>
</core-scaffold>
There was no need to overwrite the default style without importance. This is what I got: http://screencast.com/t/7AQHblQvk and it looks good until it crashes like: http://screencast.com/t/oDg3ptLpp . Then I tried to change the default width inside core-drawer-panel.html, so I changed this part of the code:
/**
* Width of the drawer panel.
*
* @attribute drawerWidth
* @type string
* @default '256px'
*/
drawerWidth: '100px',
and nothing happened. This did not change the width of the element, so now I am out of touch with ideas and knowledge on how to achieve this. Can anyone please help?
Thanks in advance!:)
source to share
Attribute drawerWidth
to change width:
<core-drawer-panel drawerWidth="100px">
https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel
source to share
In addition to ebidel's answer from Polymer Design Guide:
Dash attribute names are converted to camelCase property names by capitalizing the character following each dash and then removing the dash. For example, the first-name attribute matches firstName.
If the above answer doesn't work, try this:
<core-drawer-panel drawer-width="100px">
source to share