Search code examples
csspolymer

Hide paper-tab -- is it possible with Css

I'm creating an app that needs to be very mobile friendly. I have a simple Css class (.hide-mobile-small) that I use a media query to hide certain things on screen when device-width < 500.

It works on Divs (but isn't targeting divs only -- its defined as .hide-mobile-small -- NOT div.hide-mobile-small).

I figured this should work on any polymer element as well. I tried it on the paper-tab element because I want to hide some tabs on a multi-tab page layout when the user is viewing on a phone. But it doesn't seem to work.

Any thoughts on how to get this to work without needing to update the paper-tab component?

Thanks for any thoughts

Solution

  • Yes, you can use CSS to hide a <paper-tab>.

    For example, you could hide any <paper-tab> that has the hidden class applied:

    paper-tab.hidden {
  display: none;
}

    This example uses a media query to hide the second tab when the width is less than 480px:

    <style>
  @media screen and (max-width: 480px) {
    paper-tab:nth-of-type(2n) {
      display: none;
    }
  }
</style>
<paper-tabs selected="0">
  <paper-tab>ITEM ONE</paper-tab>
  <paper-tab>ITEM TWO</paper-tab>
  <paper-tab>ITEM THREE</paper-tab>
</paper-tabs>