fix(item): inherit overflow to allow better customization (#18502)

fixes #17670 Co-authored-by: Stefanos Anagnostou <[email protected]>
ionic-team · Jun 11, 2019 · 8d2a47e · 8d2a47e
1 parent 055e125
commit 8d2a47e
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
@@ -74,6 +74,8 @@
   text-align: initial;
   text-decoration: none;
   box-sizing: border-box;
+
+  overflow: hidden;
 }
 
 
@@ -151,7 +153,7 @@
   background: var(--background);
 
   box-shadow: var(--box-shadow);
-  overflow: hidden;
+  overflow: inherit;
   box-sizing: border-box;
 }
 
@@ -196,7 +198,7 @@ button, a {
   border-color: var(--border-color);
 
   box-shadow: var(--inner-box-shadow);
-  overflow: hidden;
+  overflow: inherit;
   box-sizing: border-box;
 }
 

diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html
@@ -4,7 +4,8 @@
 <head>
   <meta charset="UTF-8">
   <title>Item - Basic</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
   <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
   <script src="../../../../../scripts/testing/scripts.js"></script>
@@ -109,6 +110,16 @@ <h4>H4 Title Text</h4>
         </ion-label>
       </ion-item>
 
+      <ion-item class="overflow-visible">
+        <ion-label position="fixed">PIN:</ion-label>
+        <ion-input type="number" pattern="[0-9]*" inputmode="numeric" formControlName="acct_no"
+          placeholder="Enter 7 digits"></ion-input>
+        <span class="error">Must enter 7 digits</span>
+      </ion-item>
+
+      <ion-item class="overflow-scroll">
+        <ion-label class="ion-text-wrap">Item with overflow scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat pellentesque adipiscing commodo. Vulputate enim nulla aliquet porttitor. Fermentum dui faucibus in ornare quam viverra orci sagittis eu. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Cras semper auctor neque vitae. Cursus eget nunc scelerisque viverra mauris in aliquam. Non sodales neque sodales ut etiam sit amet. Sit amet nulla facilisi morbi tempus. Accumsan in nisl nisi scelerisque eu. Sed elementum tempus egestas sed sed. Urna nunc id cursus metus aliquam. Gravida dictum fusce ut placerat orci nulla pellentesque. Id diam maecenas ultricies mi eget. Elementum nisi quis eleifend quam adipiscing vitae proin.</ion-label>
+      </ion-item>
     </ion-content>
 
     <ion-footer>
@@ -118,6 +129,35 @@ <h4>H4 Title Text</h4>
     </ion-footer>
 
   </ion-app>
+
+  <style>
+    .overflow-visible {
+      --highlight-color-focused: transparent;
+      --border-color: red;
+
+      overflow: visible;
+    }
+
+    .overflow-scroll {
+      margin-top: 10px;
+      height: 140px;
+
+      overflow: scroll;
+    }
+
+    .error {
+      display: inline-block;
+      position: absolute;
+      bottom: -4px;
+      right: 1em;
+      padding: 0 6px;
+      color: red;
+      background-color: #fff;
+      font-size: 12px;
+      height: 12px;
+    }
+
+  </style>
 </body>
 
 </html>