bug: Ion-Segment has layout error in Ion-Content with ion-padding

[dythbj]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Ion-Segment has layout error in Ion-Content with ion-padding, it's nomarl on web and Simulator, but has layout error on device like below shows.

eg1: In Ion-Content with ion-padding, covered by Ion-Content on the left and right

Expected Behavior

Ion-Segment has right layout on device like this:

Steps to Reproduce

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>signup</ion-title>
    <ion-segment value="default">
      <ion-segment-button value="default">
        <ion-label>默认</ion-label>
      </ion-segment-button>
      <ion-segment-button value="terrain">
        <ion-label>地形</ion-label>
      </ion-segment-button>
      <ion-segment-button value="satellite">
        <ion-label>影像</ion-label>
      </ion-segment-button>
      <ion-segment-button value="3d">
        <ion-label>3D</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">signup</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-searchbar search-icon="./../../assets/img/search.svg" color="light" animated="true" placeholder="搜索地名、地址"></ion-searchbar>
  <ion-label class="ion-padding-horizontal"><h2>地图显示</h2></ion-label>
  <ion-segment value="default">
    <ion-segment-button value="default">
      <ion-label>默认</ion-label>
    </ion-segment-button>
    <ion-segment-button value="terrain">
      <ion-label>地形</ion-label>
    </ion-segment-button>
    <ion-segment-button value="satellite">
      <ion-label>影像</ion-label>
    </ion-segment-button>
    <ion-segment-button value="3d">
      <ion-label>3D</ion-label>
    </ion-segment-button>
  </ion-segment>
  <ion-label class="ion-padding-horizontal"><h2>地图显示</h2></ion-label>
</ion-content>

Code Reproduction URL

https://github.com/dythbj/segment/blob/main/src/app/tab1/tab1.page.html

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 8.2.0 @angular-devkit/build-angular : 17.3.8 @angular-devkit/schematics : 17.3.8 @angular/cli : 17.3.8 @ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.0.0 @capacitor/android : 6.0.0 @capacitor/core : 6.0.0 @capacitor/ios : 6.0.0

Utility:

cordova-res : not installed globally native-run : 2.0.1

System:

NodeJS : v20.14.0 (/usr/local/bin/node) npm : 10.7.0 OS : macOS Sonoma 14.5

Additional Information

It's nomarl on web and Simulator, but has error on device, so i cann't give Reproduction Url.

[dev-charles15531]

I don't seem to understand where the error is. Everything looks okay to me.

Are you trying to make the segment span full width like the segment in the header?

[dythbj]

I don't seem to understand where the error is. Everything looks okay to me.

Are you trying to make the segment span full width like the segment in the header?

Nope, It's same situation when i put the Ion-Segment in Ion-card-content

as you can see, left segment button's indicator missing a part(also on the right segment button)

Just have a test like this:

If I split the segment button down the middle, you will find parts are missing from the left.

This looks like the ion-segment is always 100% width, no matter it's parent container has padding or margin setted. So my doubt is how can i make it normal?

[dev-charles15531]

If you don't need the padding added, you can always remove the ion-card-content. The ion-card-content component introduces a new padding in the container as this is only recommended when you need a text content.

<ion-card>
  <!-- <ion-card-content> -->
    <ion-segment value="default">
      <ion-segment-button value="default">
        <ion-label>Default</ion-label>
      </ion-segment-button>
      <ion-segment-button value="segment">
        <ion-label>Segment</ion-label>
      </ion-segment-button>
      <ion-segment-button value="aa">
        <ion-label>aaDefault</ion-label>
      </ion-segment-button>
      <ion-segment-button value="bb">
        <ion-label>bbSegment</ion-label>
      </ion-segment-button>
    </ion-segment>
  <!-- </ion-card-content> -->
</ion-card>

[dythbj]

If you don't need the padding added, you can always remove the ion-card-content. The ion-card-content component introduces a new padding in the container as this is only recommended when you need a text content.

<ion-card>
  <!-- <ion-card-content> -->
    <ion-segment value="default">
      <ion-segment-button value="default">
        <ion-label>Default</ion-label>
      </ion-segment-button>
      <ion-segment-button value="segment">
        <ion-label>Segment</ion-label>
      </ion-segment-button>
      <ion-segment-button value="aa">
        <ion-label>aaDefault</ion-label>
      </ion-segment-button>
      <ion-segment-button value="bb">
        <ion-label>bbSegment</ion-label>
      </ion-segment-button>
    </ion-segment>
  <!-- </ion-card-content> -->
</ion-card>

Yes, @dev-charles15531 , this can make it display nomarl, but it's not my point. I want the Ion-segemnt follow the parent container's layout. Eg: A Ion-content with ion-padding setted，also I want to emphasize that it's looks normal on web & Simulator, but has layout error on device.