3

I have put a paper-tabs element inside a paper-scroll-header panel

But, the selection bar doesn't seem to work properly. It doesn't show up by default but when I

  1. navigate to some other page and then back to home or

  2. change the dimensions of my chrome window

the selection bar comes back

I've looked for a solution for this and found something about updateBar() a function inside the definition of paper-tabs which has to be called when you need to refresh the view.

Even so, I am unable to fire this function from the page-layout element

Please help me out...

<dom-module id="page-layout">
     <link rel="stylesheet" href="styles.css">
     <link rel="import" href="imports.html">
     <link rel="import" href="page-content.html">
     <template>
         <paper-scroll-header-panel condenses keepCondensedHeader>
            <paper-toolbar class="tall">
                <span class="flex"></span>
                <paper-icon-button icon="refresh" 
                    onclick='location.reload()'>
                </paper-icon-button>
                <paper-icon-button icon="search"></paper-icon-button>
                <div class="middle titleHead" >TMess</div>
                <span class="flex bottom"></span>
                <!--Navigation-->
                <paper-tabs id="tabs" class="bottom" 
                            selected="0" noink noBar> 
                    <paper-tab>
                        <iron-icon icon="home" class="tabs"></iron-icon>
                        <span class="tabtext">Home</span>
                    </paper-tab>
                    <paper-tab>
                        <iron-icon icon="event" class="tabs"></iron-icon>
                        <span class="tabtext">Events</span>
                    </paper-tab>
                    <paper-tab>
                        <iron-icon icon="drafts" class="tabs"></iron-icon>
                        <span class="tabtext">Suggest</span>
                    </paper-tab>
                    <paper-tab>
                        <iron-icon icon="account-box" class="tabs">
                        </iron-icon>
                        <span class="tabtext">About Us</span>
                   </paper-tab>             
                </paper-tabs>
            </paper-toolbar>
            <div class="content">
                <page-content size="100"></page-content>
            </div>
        </paper-scroll-header-panel>
     </template>
</dom-module>
<script>
  Polymer({
      is: 'page-layout'
  });
</script>
<script>
    window.onload = function(){
        setNavigation();

    };
    function setNavigation(){
        var tabs = document.querySelector('#tabs');
        var content = document.getElementsByTagName('page-content')[0];
        var pages = content.getElementsByTagName('iron-pages')[0];
        tabs.addEventListener('iron-select', function(){
            pages.selected = tabs.selected;
        });
    }
</script>
TMess
  • 156
  • 2
  • 9
  • I can't tell from your question if you are trying to always show or always hide the bar. If you want to hide it you need to change `noBar` to `no-bar`. If you are trying to show it you should obviously remove `noBar`, however I am also having an issue where it does not show until the window resizes or a tab is clicked. – davkutalek Jun 22 '15 at 15:50
  • Where is that "no-bar" property coming from? It is undocumented, not on the Polymer website ... but it works! – nepdev Jan 26 '16 at 18:45

1 Answers1

0

I have a hack that may help you: tabs._onResize(); This shows the selection bar in Polymer 1.1 but I do not consider it a good practice, you should probably file a bug in their repository.

junikorn
  • 1
  • 2