CODEWITHSUNDEEP
ionic-framework
Milesh Chudasama
Milesh Chudasama

Reputation: 11

ion-select selected option too long

Trying to style the length of the selected label for some reason it doesn't tuncate and is pushing the ion-select to be larger than the screen making the element hit the side of the screen.

Selected option is too long

<ion-select placeholder="How did you hear about us?">
<ion-select-option>Recommendation - Children's Centre</ion-select-option>
<ion-select-option>Recommendation - Hospital</ion-select-option>
<ion-select-option>Recommendation - Local Authority / Social Services</ion-select-option>
</ion-select>

ion-select {
border:1px solid #ccc;
border-radius: 5px;
height:38px;
--padding-start:10px;
outline:0;
width: 100%;
max-width:100%;
}

If I add display block to the ion-select that semi solves it but then drops the arrow on the select underneath.

Just need it to truncate the selected option if it is too large but when I inspect it, it shows label is within the #shadow-root which I can't get to, to style it.

Any help would be great.

Ionic:

Ionic CLI : 6.17.1 (C:\Users\Me\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/angular 5.6.13 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.1.4 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0

Capacitor:

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

Utility:

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

System:

NodeJS : v14.17.6 (C:\Program Files\nodejs\node.exe) npm : 6.14.15 OS : Windows 10

Upvotes: 1

Views: 488

Answers (1)

Milesh Chudasama
Milesh Chudasama

Reputation: 11

For anyone who come sacross this question in the future. Managed to resolve this by adding the styling "display:block" on the ion-select, then adding further styling around it to make sure the arrow drops down properly and the content shows. Also added:

white-space:nowrap;
width 90%;
overflow:hidden;

That seemed to sort it.

Upvotes: 0

Related Questions