Horizontal scroll of toolbar is not working on Mobile

Question

I am building an ionic app, in which I added toolbar inside the header and it has 5 buttons to navigate. but when I try the code on browser devices the horizontal scroll works fine for the toolbar but in the actual device, it will not work properly. sometimes it scrolled and sometimes it will not. Below is the code for the same.

<ion-header>
  <ion-navbar color="light">
    <ion-title>Home</ion-title>
    <ion-buttons end>
      <button ion-button icon-only>
        <ion-icon name="search"></ion-icon>
      </button>
      <button ion-button icon-only>
        <ion-icon name="cart"></ion-icon> 
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar color="light">
    <ion-buttons>
      <button ion-button clear>{{'All'|translate}}</button>
    </ion-buttons>
    <ion-buttons *ngFor="let facet of parentCategories">
      <button ion-button [ngClass]=" {'active' : selectedFacet == facet}">{{facet}}
      </button>
      <button ion-button icon-only clear class="accordion" (tap)="getSubFacets(facet);accordion(event)" *ngIf="selectedFacet == facet"><ion-icon name="ios-arrow-down"></ion-icon></button>
    </ion-buttons>
    <div id="sub-category" class="sub-category">
      <ion-buttons *ngFor="let subFacet of childCategories">
        <button ion-button [ngClass]=" {'active' : selectedSubFacet == subFacet}" (tap)="getFilteredProducts('categoryFacet',subFacetMap.get(subFacet), selectedFacet, subFacet)">
          {{subFacet}}</button>
      </ion-buttons>
    </div>
  </ion-toolbar>
</ion-header>

css:

.toolbar-content {
     overflow-x: auto;
     white-space: nowrap;
     overflow-y: hidden;
     width: 100%;
     height: 56px;
}

Maybe this can help you out: https://stackoverflow.com/questions/15732466/mobile-overflowscroll-and-overflow-scrolling-touch-prevent-viewport-bounce — Jacopo Sciampi, Feb 04 '19 at 08:00

Ahmed Abuamra · Answer 1 · 2019-02-04T17:14:27.497

I had the same issue and I followed this sample

CSS:

ion-toolbar.scrollable-segments {
ion-segment {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;

  ion-segment-button.segment-button {
    display: inline-block;
    width: auto;
  }
 }
}

HTML:

<ion-toolbar no-border class="scrollable-segments">
<ion-segment [(ngModel)]="segment">
    <ion-segment-button value="all">
        All
    </ion-segment-button>
    <ion-segment-button value="test">
        Recent
    </ion-segment-button>
    <ion-segment-button value="test2">
        Recent
    </ion-segment-button>
    <ion-segment-button value="test3">
        Recent
    </ion-segment-button>
    <ion-segment-button value="test4">
        Recent
    </ion-segment-button>
    <ion-segment-button value="test5">
        Recent
    </ion-segment-button>
    <ion-segment-button value="test6">
        Recent
    </ion-segment-button>
    <ion-segment-button value="test7">
        Recent
    </ion-segment-button>
</ion-segment>
</ion-toolbar>

Refrence: https://forum.ionicframework.com/t/horizontally-scrolling-sub-header-in-ionic-2/42722/8

Can you actually get it to display say only fewer items eg. size ion-segment-button width=20vw ? I am getting ellipses in the segment buttons Will the ion-segment go past the right edge of the screen and allow you to scroll to see more segment buttons? how? Could you perhaps show a working example at stackblitz.com Thank you. — Meryan, Apr 20 '20 at 01:42

Aniruddh Thakor · Answer 2 · 2019-02-07T05:01:31.567

try this,its working code,tried and tested

HTML:

  <ion-toolbar color="light">
    <div style="overflow-x: scroll;width: 100%">
      <ion-row nowrap>
        <ion-buttons>
          <button ion-button clear>All</button>
        </ion-buttons>
        <ion-buttons *ngFor="let facet of countries">
          <button ion-button>
            {{facet.item}}
          </button>
          <button ion-button icon-only clear class="accordion" (tap)="getSubFacets(facet);accordion(event)" *ngIf="selectedFacet == facet">
            <ion-icon name="ios-arrow-down"></ion-icon>
          </button>
        </ion-buttons>
      </ion-row>
    </div>
  </ion-toolbar>

Horizontal scroll of toolbar is not working on Mobile

2 Answers2