CODEWITHSUNDEEP
javascripthtmlpolymer
yglodt
yglodt

Reputation: 14551

How to change breakpoint of paper-scroll-header-panel

see the example-code below.

Right now the first paper-scroll-header-panel collapses only (and transforms into a hamburger-menu) when I change the display-size to a smartphone in portrait mode.

I would like it to collapse much earlier, but seem to be unable to find how to do that.

How can I change the collapse break-point ?

<paper-drawer-panel id="paperDrawerPanel">

    <paper-scroll-header-panel drawer fixed>

        <paper-toolbar>
            <span class="paper-font-title"><spring:message code="appTitle" /></span>
        </paper-toolbar>

        <paper-menu class="list" attr-for-selected="data-route" selected="{{route}}" on-iron-select="onMenuSelect"> 
            <paper-item><a data-route="home" href="/home"> <iron-icon icon="home"></iron-icon> <span>Home</span></a></paper-item>
            <paper-item><a data-route="page1" href="/page1"> <iron-icon icon="mail"></iron-icon> <span>Page 1</span></a></paper-item>
            <paper-item><a href="/logout"> <iron-icon icon="verified-user"></iron-icon> <span>Log out</span></a></paper-item>
        </paper-menu>

        <div>Drawer content...</div>
    </paper-scroll-header-panel>

    <paper-scroll-header-panel main condenses keep-condensed-header>

        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>

        <paper-toolbar id="mainToolbar" justify="justified">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </paper-toolbar>

        <iron-pages attr-for-selected="data-route" selected="{{route}}">
            <section data-route="home">
                <main-view></main-view>
            </section>
            <section data-route="page1">
                <x-page></x-page>
            </section>
        </iron-pages>

    </paper-scroll-header-panel>
</paper-drawer-panel>

Upvotes: 1

Views: 198

Answers (1)

Srik
Srik

Reputation: 2381

The responsiveWidth property of paper-drawer-panel can be used to control the screen width at which the menu collapses. Currently it is set to 600px.

Update: The forceNarrow property can be used to collapse the menu all the time.

<paper-drawer-panel force-narrow></paper-drawer-panel>

Upvotes: 2

Related Questions