CODEWITHSUNDEEP
vue.jsionic-framework
JᴀʏMᴇᴇ
JᴀʏMᴇᴇ

Reputation: 276

Ionic toolbar too wide for some displays

I have the following toolbar rendering in my ionic app:

enter image description here

You may be able to tell that the two furthest left and right icons don't appear to have the same padding either side, it's obviously too wide for the screen. this becomes even more evident when I emulate a smaller width mobile device:

enter image description here

I would've expected the ionic framework to deal with this since it's supposed to aid app development.

How can I ensure the toolbar fully fits in all mobiles devices regardless of width?

Code:

<ion-header :translucent="true">
  <ion-toolbar>
    <ion-segment value="all">
      <ion-segment-button value="camera"><ion-icon :icon="cameraOutline" color="primary"></ion-icon></ion-segment-button>
      <ion-segment-button value="albums"><ion-icon :icon="albumsOutline" color="primary"></ion-icon></ion-segment-button>
      <ion-segment-button value="people"><ion-icon :icon="peopleOutline" color="inactiveitem"></ion-icon></ion-segment-button>
      <ion-segment-button value="compass"><ion-icon :icon="compassOutline" color="primary"></ion-icon></ion-segment-button>
      <ion-segment-button value="calendar"><ion-icon :icon="calendarOutline" color="primary"></ion-icon></ion-segment-button>
      <ion-segment-button value="settings"><ion-icon :icon="settingsOutline" color="primary"></ion-icon></ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

Upvotes: 1

Views: 532

Answers (1)

Najam Us Saqib
Najam Us Saqib

Reputation: 3402

To make it work on all screen use scrollable attribute.

<ion-segment value="all" scrollable >
  <ion-segment-button value="camera">
     <ion-icon :icon="cameraOutline" color="primary"></ion-icon>
  </ion-segment-button>

  <ion-segment-button value="all">
     <ion-icon :icon="cameraOutline" color="primary"></ion-icon>
  </ion-segment-button>
  
</ion-segment>

Upvotes: 2

Related Questions