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

fix(item): inherit align-items from parent item (#19278)

Browse Source 
inherits alignment in inner item, sets item alignment to center

fixes #18703
This commit is contained in:
Brandy Carney
2020-05-29 11:30:19 -04:00
committed by GitHub
parent 323e15003f
commit 882f8fef07
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
core/src/components/input/test/spec/index.html
View File

@ -13,7 +13,7 @@
<body> <body>
<ion-app> <ion-app>
<ion-content class="ion-padding"> <ion-content>
<ion-item> <ion-item>
<ion-label position="floating">Floating: input</ion-label> <ion-label position="floating">Floating: input</ion-label>
<ion-input></ion-input> <ion-input></ion-input>
@ -34,6 +34,16 @@
<ion-label position="stacked">Stacked: div</ion-label> <ion-label position="stacked">Stacked: div</ion-label>
<div>A div</div> <div>A div</div>
</ion-item> </ion-item>
<ion-item class="ion-align-items-center">
<ion-icon slot="start" name="planet"></ion-icon>
<ion-label position="stacked">Align items: center</ion-label>
<div>A div</div>
</ion-item>
<ion-item class="ion-align-items-center">
<ion-icon slot="start" name="planet"></ion-icon>
<ion-label position="stacked">Align items: center</ion-label>
<div class="ion-align-self-end">A div: align self right</div>
</ion-item>
<ion-item> <ion-item>
<ion-label position="floating">Floating: textarea</ion-label> <ion-label position="floating">Floating: textarea</ion-label>
<ion-textarea></ion-textarea> <ion-textarea></ion-textarea>

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

@ -79,6 +79,9 @@
position: relative; position: relative;
align-items: center;
justify-content: space-between;
outline: none; outline: none;
color: var(--color); color: var(--color);
@ -87,9 +90,9 @@
text-align: initial; text-align: initial;
text-decoration: none; text-decoration: none;
box-sizing: border-box;
overflow: hidden; overflow: hidden;
box-sizing: border-box;
} }
@ -202,8 +205,8 @@
display: flex; display: flex;
position: relative; position: relative;
align-items: center; align-items: inherit;
justify-content: space-between; justify-content: inherit;
width: 100%; width: 100%;
min-height: var(--min-height); min-height: var(--min-height);
@ -313,9 +316,8 @@ button, a {
// Item Input // Item Input
// -------------------------------------------------- // --------------------------------------------------
:host([vertical-align-top]),
:host(.item-input) { :host(.item-input) {
align-items: flex-start; align-items: center;
} }
.input-wrapper { .input-wrapper {
@ -323,6 +325,7 @@ button, a {
flex: 1; flex: 1;
flex-direction: inherit; flex-direction: inherit;
align-items: inherit; align-items: inherit;
align-self: stretch; align-self: stretch;
@ -332,8 +335,8 @@ button, a {
box-sizing: border-box; box-sizing: border-box;
} }
:host(.item-label-stacked) .item-native, :host(.item-label-stacked),
:host(.item-label-floating) .item-native { :host(.item-label-floating) {
align-items: start; align-items: start;
} }