javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 16:16:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item): allow item to grow when it is used in a flex container (#28594)

Browse Source 
When an item containing a select is used inside of a flex container, the item collapses to `0px` width. Example code:

```html
<div style="display: flex">
  <ion-item>
    <ion-select aria-label="fruit" placeholder="Select fruit">
      <ion-select-option value="apples">Apples</ion-select-option>
      <ion-select-option value="oranges">Oranges</ion-select-option>
      <ion-select-option value="bananas">Bananas</ion-select-option>
    </ion-select>
  </ion-item>
</div>
```

This change sets the flex property to `1` on `ion-item` so that it will grow inside of a flex container, resulting in the select being displayed. The `flex` property is ignored when item is inside of a block container.
This commit is contained in:
Brandy Carney
2023-11-29 10:57:58 -05:00
committed by GitHub
parent ddf630abfe
commit 1c1b567279
8 changed files with 25 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/item/item.scss
View File

@ -80,6 +80,15 @@
position: relative;
// When an item containing a select is inside of a
// flex container the item will collapse to 0px
// width due to the select setting the width to 0px.
// By setting the flex property here, we are
// allowing the item to grow to fill the flex container.
// If the item is inside of a block container this
// property will be ignored.
flex: 1;
align-items: center;
justify-content: space-between;