Skip to content

Commit 9b59138

Browse files
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: https://github.com/ionic-team/ionic-framework/blob/f0da2c1727a4b4bb5dfeab3fd0be10e5457bbc83/core/src/components/select/select.scss#L84 | Before | After | | --- | --- | | ![before](https://github.com/ionic-team/ionic-framework/assets/6577830/ca32e2a7-ee10-427e-b060-3c554e9e7fec) | ![after](https://github.com/ionic-team/ionic-framework/assets/6577830/8be2d918-0caa-4b7a-8fc7-a57456307a84) | ## Does this introduce a breaking change? - [ ] Yes - [x] No --------- Co-authored-by: ionitron <[email protected]>
1 parent f0da2c1 commit 9b59138

15 files changed

+6
-0
lines changed

core/src/components/checkbox/checkbox.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
}
3939

4040
:host(.in-item) {
41+
flex: 1 1 0;
42+
4143
width: 100%;
4244
height: 100%;
4345
}
-1 Bytes
Loading
20 Bytes
Loading
51 Bytes
Loading
-6 Bytes
Loading
113 Bytes
Loading
17 Bytes
Loading
15 Bytes
Loading
222 Bytes
Loading
-86 Bytes
Loading

0 commit comments

Comments
 (0)