Ionic-framework: feat: allow to change min-width of ion-segment-button

[slevy85]

Feature Request

Ionic version:
[x] 4.x

Describe the Feature Request
I would like to change the min-width of a ion-segment-button, and now there is hard-coded value on .button-native (90px for md and 70px for ios) that prevents any changes from outside.

When I change min-width on ion-segment-button it only changes the width of the container, but .button-native stays larger, which causes the icon to be uncentered and also the ripple effect becomes wrong :

ion-segment-button {
    min-width: 48px;
}

Describe Preferred Solution
Adding variable --min-width to ion-segment-button and use it for .button-native would resolve this.

[liamdebeasi]

Thanks for the issue. Can you please describe your use case? The MD spec sets a fixed minimum width so text does not get cut off (same thing with iOS). If the buttons extend out of the visible area the ion-segment can be set to scrollable="true".

[slevy85]

Thank you for this very quick answer.

My use case is that I have 5 segment buttons with just an icon inside. The icon is small (24px) so the segment button could be smaller.
I tried to use layout="label-hide" but it didn't help.

[cmaas]

Thanks for the issue. Can you please describe your use case? The MD spec sets a fixed minimum width so text does not get cut off (same thing with iOS). If the buttons extend out of the visible area the ion-segment be set to scrollable="true".

Same issue here. I have a row with segment buttons. They are basically single letters A B C D E F (more than 3). On a small screen (360x480 for example), it's impossible to have the segment buttons next to each other. Scrolling is just bad UI and I don't see why this shouldn't be configurable.

I added this to my app.css, but it seems to only make a small difference for the iOS theme:

ion-segment-button {
    min-width: auto !important;
}

Here is what it looks like on iOS:

And this is Android:

IMHO, no reason to have this huge padding around the buttons. Please also note that the width for iOS is even smaller than for Android (320px, like the first iPhone SE).

Interesting tidbit: My code above used to work for the Android theme as well, but it doesn't anymore. Not sure which ionic/core version broke it.

[cmaas]

@liamdebeasi Culprit is this line:

https://github.com/ionic-team/ionic/blob/fa9ddc91bc9fefc2bb247cfe7511384f77335476/core/src/components/segment-button/segment-button.md.scss#L48

Hardcoded min-width for .button-native in md-style. No equivalent exists in the ios-stylesheet. No way to override this unfortunately. It'd be great if this could be changed, because this line effectively limits ion-segment to 3-4 items next to each other on smaller displays.

[renatonagliati]

Tip to decrease the ion-segment-button width and have an MD-like appearance (while this request is not implemented):

HTML:
<ion-segment id="ion-segment-reduced" color="light" mode="ios" scrollable> <ion-segment-button value="1"> <ion-icon class="ion-no-margin" color="primary" name="person-circle"></ion-icon> <ion-label class="ion-no-margin ion-text-wrap">Button 1</ion-label> </ion-segment-button> </ion-segment>

SCSS:
#ion-segment-reduced ion-segment-button { --padding-start: 0px !important; --padding-end: 0px !important; --border-radius: 0px !important; --indicator-box-shadow: none !important; --border-color: transparent !important; }

[leono286]

I agree on "scrolling is just bad UI" when you only have some icons and just 6 items to show. In my case scrolling is not required whatsoever. Any fix/workaround on this?

[SvenBudak]

Any news on this? Btw i ask for v5. (becuase in topic is v4 tagged) we was forced to implement material lib just to use because this issue... I think webcomponents are still not ready for use in production before there is a way to overwrite all default styles.

You never know. Today everything is good, tomorrow the customer comes and wants something changed. Then you have to explain to him that things that have been going on since the invention of CSS are suddenly no longer possible because of webcomponents.

[Eraldo]

I am also interested in overwriting some default styles.
Is there a general issue for this, since https://github.com/ionic-team/ionic/issues/21490 has been closed down in favour of this issue?

[liamdebeasi]

Can everyone try the following dev build, and let me know if it resolves the issue?

Ionic Angular:
npm i @ionic/[email protected]

Ionic React
npm i @ionic/[email protected]

Using this dev build, you should be able to set min-width directly on the host ion-segment-button:

ion-segment-button {
  min-width: auto;
}

[geckse]

This indeed worked! Thank you @liamdebeasi! 🎉
Tested it for ionic/angular.

The "Feed" Segment is now shorter than the 90px default min-width by changing the ion-segment-button min-width to auto, as suggested.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/21722, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.