Overflow scroll tabbar

@netsam wrote:

Hi, I build a scrolling tabbar only with css

File: style.css

.tab-nav, .tabs{
  overflow-x: scroll;
}

.tab-item{
  min-width: 80px;
}

File: tabs.html

<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <ion-tab title="News" icon-off="news" icon-on="news" href="#/tab/dash">
    <ion-nav-view name="tab-dash"></ion-nav-view>
  </ion-tab>

  etc..

</ion-tabs>

The div scrolls on right, but the problem is that the icons on left (News and other) are hidden.

Schermata 2016-06-06 alle 09.10.43.png832x1258 199 KB

I saw that the width of .tabs class is 100%. When remove this width or I put a fixed width the hidden icons showa but scrolling doesn't work.

Schermata 2016-06-06 alle 09.12.46.png1145x1259 216 KB

News icon appear in a browser only when I enlarge windows

Posts: 1

Participants: 1

Read full topic