style: ion-select has styling problems

See original GitHub issue

The ion-select directive has some styling issues. I’m using Chrome Version 48.0.2564.97 (64-bit) on Mac and 2.0.0-beta.17: screen shot 2016-02-11 at 19 09 46

My code looks like this:

<ion-content>

    <ion-card>

        <ion-item>
            <ion-label>Music</ion-label>
            <ion-select [(ngModel)]="music">
                <ion-option>Alice in Chains</ion-option>
                <ion-option>Green Day</ion-option>
                <ion-option>Nirvana</ion-option>
                <ion-option>Pearl Jam</ion-option>
                <ion-option>Smashing Pumpkins</ion-option>
                <ion-option>Soundgarden</ion-option>
                <ion-option (select)="stpSelect()">Stone Temple Pilots</ion-option>
            </ion-select>
        </ion-item>

    </ion-card>

</ion-content>

Issue Analytics

State:
Created 8 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

2reactions

luispestanajrcommented, Jul 28, 2016

Hello @phavre.

I did it with custom css class.

Here is the code:

.myCustomSelect{ max-width: 100% !important; }

I hope it can help you.

0reactions

phavrecommented, Feb 17, 2016

Is there some way to the ion-select component to take 100% of the width ? Because in a multi select list, I needed to show some of the selected entries but with the standard width I’ve got only the first entry. So I used a stacked label, but the select width didn’t widened.

Top Results From Across the Web

ion-select has styling problems · Issue #5427 - GitHub

The ion-select directive has some styling issues. I'm using Chrome Version 48.0.2564.97 (64-bit) on Mac and 2.0.0-beta.17: My code looks ...

Ion-select-option Customizing Individual Options does not work

I try to embed custom styles to ion-select-option as described here: ... Select Option | What Is An Option Select on Ionic Framework...

Styling ion-select with popover interface - css - Stack Overflow

I would like to style the ion-select-options so that they span the width of the screen but nothing I have tried is working....

[IONIC] ion-select long option viewing issue | by Rajesh Mishra

I have recently faced an issue with long select options. When the option in the select is very long, let say a sentence...

Announcing Ionic 6 - Ionic Blog

Additionally, ion-select has been updated to use the latest Material Design styles with the popover interface. The Ionic team is keeping an eye ......