fix(form-controls): adjust flex properties inside of an item (#29328)
Issue number: resolves #29319
---------
## What is the current behavior?
Icons (not slotted) alongside a checkbox, toggle, or radio in an item
using the modern syntax cause the icon to shrink in width.
## What is the new behavior?
Allow the checkbox, toggle, and radio to shrink to accommodate the icon.
This matches the select behavior:
f0da2c1727/core/src/components/select/select.scss (L84)
| Before | After |
| --- | --- |
|

|

|
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
---------
Co-authored-by: ionitron <hi@ionicframework.com>
@ -38,6 +38,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:host(.in-item) {
|
:host(.in-item) {
|
||||||
|
flex: 1 1 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
@ -58,6 +58,8 @@ input {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:host(.in-item) {
|
:host(.in-item) {
|
||||||
|
flex: 1 1 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -39,6 +39,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
:host(.in-item) {
|
:host(.in-item) {
|
||||||
|
flex: 1 1 0;
|
||||||
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|