How to add horizontal scrolling to Ion Toolbar

Ionic Framework
1

Hi. I have placed several buttons on an ion-toolbar. It looks fine on devices with width 1280px and above but on small screens the toolbar is clipped and the user cannot scroll horizontally to view all the buttons. Please see attached screenshots.

small-screen-layout

normal-layout
normal-layout1380Ă—916 18 KB

2

You could use Scrollable Segments otherwise you can use overflow-x: auto CSS on the parent container.

If you need additional help, please provide a minimal reproduction on StackBlitz so we can easily play with your scenario.

3

I tried setting “overflow-x: auto” on the parent container but it did not work. Setting overflow-x: auto on the .toolbar-container class shows the horizontal scrollbars, but this class is defined within the shadow root and cannot be modified.

Please see: Ionic Toolbar Scrolling Issue - StackBlitz

4

Wrap everything in a div and remove using the ion-toolbar slots. Then use the CSS below on the div. Obviously you can add additional CSS around flex to get the items positioned as you wish.

div {
  display: flex;
  overflow-x: auto;
}

See Ionic Toolbar Scrolling Issue (forked) - StackBlitz

5

The toolbar is now scrolling on small screens. Thank you very much for your help.

1 Like