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
On Mon, Nov 24, 2014 at 4:20 PM, Jelena Jovanovic <[email protected]>
wrote:
> 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>
>
>
>
> понедељак, 24. новембар 2014. 22.31.13 UTC+1, 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?
>>
>>
>> понедељак, 24. новембар 2014. 21.42.15 UTC+1, Eric Bidelman је написао/ла:
>>>
>>> Hi, I responded on SO.
>>>
>>> http://stackoverflow.com/questions/27113266/having-
>>> trouble-with-changing-core-drawer-panel-default-width
>>> <http://www.google.com/url?q=http%3A%2F%2Fstackoverflow.com%2Fquestions%2F27113266%2Fhaving-trouble-with-changing-core-drawer-panel-default-width&sa=D&sntz=1&usg=AFQjCNFt2nCyIjBOD6HYuyQwOkkHDiwRcw>
>>>
>>> On Mon, Nov 24, 2014 at 1:58 PM, Jelena Jovanovic <[email protected]>
>>> wrote:
>>>
>>>> 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
>>>>
>>>>
>>>>
>>>> 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 [email protected].
>>>> To view this discussion on the web visit https://groups.google.com/d/
>>>> msgid/polymer-dev/7db9800b-655c-44fd-baa3-6bdcd51a5013%
>>>> 40googlegroups.com
>>>> <https://groups.google.com/d/msgid/polymer-dev/7db9800b-655c-44fd-baa3-6bdcd51a5013%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>> .
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>
>>> 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 [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/37a6bff2-69e6-4f86-b671-6abdf50ac259%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/37a6bff2-69e6-4f86-b671-6abdf50ac259%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>
> For more options, visit https://groups.google.com/d/optout.
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CACGqRCCMfmeaxk9FMKCRrV6F_xE8jz-Ejco2s%2Bfv_Ndm-ZsPkg%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
