bug: ionic input component in @ionic/core/@5.0.6+ is not backward compatible
See original GitHub issueBug Report
Ionic version:
[x] @ionic/core@5.x
@stencil/core@1.8.x @ionic/core@5.0.6-5.0.7
Current behavior:
When using @stencil/core@1.8.x and @ionic/core/@5.0.7 the ionic input doesn’t work properly. In specific, ion-label inside ion-item doesn’t align properly, also the popup of ion-select cannot be clicked.
The inappropriate layout in the current release:
Expected behavior:
The ion-label should align consistently, and the pop up of ion-select should be clickable as in 5.0.5.
The working appearance in previous release:
Steps to reproduce:
Try to run the project with below library version combination
@stencil/core | @ionic/core | works or not |
---|---|---|
1.8.8 | 5.0.5 | Y |
1.8.11 | 5.0.5 | Y |
1.8.11 | 5.0.6 | N |
1.8.11 | 5.0.7 | N |
1.12.1 | 5.0.6 | Y |
1.12.1 | 5.0.7 | Y |
Related code:
<ion-list>
<ion-item>
<ion-label position='stacked'> Label 1 </ion-label>
<ion-select>
<ion-select-option value='1'> option 1 </ion-select-option>
<ion-select-option value='2'> option 2 </ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label position='stacked'> Label 2 </ion-label>
<ion-input type='text'/>
</ion-item>
<ion-item>
<ion-label position='stacked'> Label 3 </ion-label>
<ion-textarea/>
</ion-item>
</ion-list>
Other information:
The bug appears on desktop Firefox, Chrome and Android Chrome. (not tested other environment)
Ionic info:
Ionic:
Ionic CLI : 6.3.0
Capacitor:
Capacitor CLI : 1.5.2
@capacitor/core : 1.5.0
Utility:
cordova-res : 0.11.0
native-run : not installed
System:
NodeJS : v12.13.0
npm : 6.14.4
OS : Linux 5.4
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (4 by maintainers)
Top Results From Across the Web
ion-input: Custom Input Value Type Styling and CSS Properties
The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same...
Read more >ionic and angular ngModel not working undefined
Solved. As @Pankaj Sati says, it is needed to add FormsModule and IonicModule to the module.ts file:
Read more >Ionic Tutorial #9 - Error message component for form validation
Ionic Framework Tutorial: creating error messages component for our form validation error messages.Links: Ionic Framework: ...
Read more >App Rejected - Ion-Input Login Iss… | Apple Developer Forums
I am using React + Ionic/Capacitor for my iOS app and keep getting my app rejected due to the reviewer being unable to...
Read more >Date picker popup in Ionic 6 | Damir's Corner
The ion-popover component can be used to achieve similar behavior to Ionic 5, so that the layout of pages with a date picker...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks for the issue. Can you provide a repo with the code required to reproduce this issue?
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.