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

inherits alignment in inner item, sets item alignment to center fixes #18703
ionic-team · May 29, 2020 · 882f8fe · 882f8fe
1 parent 323e150
commit 882f8fe
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/core/src/components/input/test/spec/index.html b/core/src/components/input/test/spec/index.html
@@ -13,7 +13,7 @@
 
 <body>
   <ion-app>
-    <ion-content class="ion-padding">
+    <ion-content>
       <ion-item>
         <ion-label position="floating">Floating: input</ion-label>
         <ion-input></ion-input>
@@ -34,6 +34,16 @@
         <ion-label position="stacked">Stacked: div</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>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-label position="floating">Floating: textarea</ion-label>
         <ion-textarea></ion-textarea>

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