Hello, I got two questions regarding ion-select, it is been difficult to style it like my inputs as for them I use the .native-wrapper, for ion-select i have to use ::part(container) something like:
ion-select.ts =
<ion-select
label="{{ label | translate }}"
label-placement="stacked"
aria-label="label"
placeholder="{{ placeholder | translate }}"
[formControl]="control"
[disabled]="disabled"
>
<ion-select-option
*ngFor="let option of options"
[value]="option[valueProperty]"
>{{ option[labelProperty] }}</ion-select-option
>
</ion-select>
general.scss =
ion-select {
--border-style: none;
&::part(container) {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 5px;
padding: 8px;
background-color: var(--ion-color-light-tint);
}
&::part(option) {
background-color: var(--ion-color-light-tint);
color: var(--ion-color-dark);
}
}
It was good, i had the style almost similar to the rest of my inputs with the label on top (a little problem with the icon though)
But there was just an issue that i had, the border didn’t take all the borders like the others input, it was using fill=“solid” by default:
Using fill=“outline” makes it not working , so one of my questions,
- Can I put the label like before with fill=“outline” as the label is always there,
So I have to remove them from ion-select and add it outside, the only problem is that the options menu wont have a title label anymore:
<ion-label
*ngIf="label"
class="label-text-wrapper sc-ion-input-md sc-ion-input-ios"
>{{ label | translate }}</ion-label
>
<ion-select
fill="outline"
aria-label="label"
placeholder="{{ placeholder | translate }}"
[formControl]="control"
[disabled]="disabled"
>
<ion-select-option
*ngFor="let option of options"
[value]="option[valueProperty]"
>{{ option[labelProperty] }}</ion-select-option
>
</ion-select>
- I am having trouble with the select-outline-container, it is taking a lot of space, and i can’t manipulate it as is a shadow-root, I can only style that small part with ::part(container) which it does not takes all the space, so i currently have no ideas to how to approach these.