Having trouble with changing <core-drawer-panel> default width

[Jelena Jovanovic]

Hi,

I started playing around with Polymer few days ago and so far I understand it quite good, but just now I ran into an problem. I tried to change default width of <core-drawer-panel> but I couldn't get the desired result. First I tried to change width in css only with these changes:

  <style>

      #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;
      }
</style>

 
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>

It didn't wanted to overwrite the default style without !important. This is what i got: http://screencast.com/t/7AQHblQvk and it looks good until it collapse, like this: http://screencast.com/t/oDg3ptLpp . Then I tried to change default width inside of core-drawer-panel.html so I modified this part of code:

/**
 * Width of the drawer panel.
 *
 * @attribute drawerWidth
 * @type string
 * @default '256px'
 */
 drawerWidth: '100px',

and nothing happened. It didn't changed the width of element, so now I am out of ideas and knowledge about how to achieve this. Can anyone help?

Thanks in advance! :)

Jelena

[Eric Bidelman]

Hi, I responded on SO. 

http://stackoverflow.com/questions/27113266/having-trouble-with-changing-core-drawer-panel-default-width

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/7db9800b-655c-44fd-baa3-6bdcd51a5013%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jelena Jovanovic]

Thanks Eric, that worked. :)

Now i got this on small screen http://screencast.com/t/XxhYYggpflmb .  Now is there a way to change width of <core-drawer-panel> when opened trough toggle button like on screenshot?

[Jelena Jovanovic]

Btw, I forgot to say that I changed html, since the old one didn't contained <core-drawer-panel> , into this:

<core-drawer-panel id="drawerPanel" drawerWidth="100px">

  <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-toolbar id="mainheader">
      <paper-icon-button
        id="navicon" icon="menu"></paper-icon-button>
      <span flex>Title</span>
    </core-toolbar>

    <div class="content">
      If drawer is hidden, press button to display drawer.
    </div>

  </core-header-panel>

</core-drawer-panel>

[Eric Bidelman]

You can use Shadow DOM's ::shadow to give the drawer a different size when it's opened on mobile:

<style shim-shadowdom>

  #drawerPanel[narrow]::shadow #drawer {

   width: 256px !important; 

  }

</style>

http://jsbin.com/mawurofelo/1/edit?html,output

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/37a6bff2-69e6-4f86-b671-6abdf50ac259%40googlegroups.com.

[Jelena Jovanovic]

Thanks Eric, you are awesome! :)