ion-input & ion-select new Modern Syntax problem
cbuyuk opened this issue · comments
URL
https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax
Issue Description
Hi Everyone,
In Ionic 7 new select & input syntax introduced.But ı have some problems about it.
First problem that ı have is;
<ion-item lines="none">
<ion-label><b style="color: red;">Project #:</b></ion-label>
<ion-select interface="popover">
<ion-select-option>value</ion-select-option>
</ion-select>
</ion-item>
In new syntax there is no way to set color or make it bold to label.As it changed to;
<ion-item lines="none">
<ion-select label="Project #:" interface="popover">
<ion-select-option>value</ion-select-option>
</ion-select>
</ion-item>
How can ı set a color or font to label in new syntax method?
The other problem that ı have is when ı run my project the select & input syntax with the old syntax are not rendering.I need to close page and enter again in other to make it appear.How can ı resolve this problem?
Here is the code;
<ion-item lines="none">
<ion-label><b">Protocol:</b></ion-label>
<ion-select mode="ios" interface="popover">
<ion-select-option [value]="http">http</ion-select-option>
<ion-select-option [value]="https">https</ion-select-option>
</ion-select>
</ion-item>
Hi, you've asked two separate questions here, and I'll address both:
First, about styling the select label. You can do this with CSS that targets the shadow part, e.g.
ion-select::part(label) {
color: red;
font-weight: bold;
}
For your second question about the form elements not rendering on the first load: I'm not able to reproduce this with the code snippet you've provided. Please provide a full reproduction. Thank you!
Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that we are not able to reproduce.
Please provide easy to follow steps for us to reproduce this issue.
Hi, you've asked two separate questions here, and I'll address both:
First, about styling the select label. You can do this with CSS that targets the shadow part, e.g.
ion-select::part(label) { color: red; font-weight: bold; }For your second question about the form elements not rendering on the first load: I'm not able to reproduce this with the code snippet you've provided. Please provide a full reproduction. Thank you!
Thank you for your response.It works for ion-select.But how about ion-input.Is it possible to set same css style to ion-input.As far as ı see ion-input does not have CSS shadow part.My code was like this;
<ion-label style="font-weight: bold;color:red;">Text</ion-label>
<ion-input></ion-input>
Apologies for the delayed response. Input is a scoped component, so it doesn't use shadow parts. You can access the elements directly. Angular's scoped encapsulation feature makes this a little tricky, though, so the easiest path forward for you may be to use ion-input's label slot shown here: https://ionicframework.com/docs/api/input#label-slot-experimental
Here is an example using your label styling: https://stackblitz.com/edit/angular-9rnluk?file=src%2Fapp%2Fexample.component.html
Can you let me know if the above pattern works for your use case? We will also still need a minimal reproduction for the issue you mentioned about the form elements not rendering on first load.
Can you let me know if the above pattern works for your use case? We will also still need a minimal reproduction for the issue you mentioned about the form elements not rendering on first load.
Hi there,
Yes its worked with the solution you have given.Thanks for it.Due to not rendering on first load we have changed our all ion-input & ion-select with label styling you have given.After we changed it worked without a problem.
Glad to hear things have been resolved! Let me know if you run into further problems with this.