Skip to content
Permalink
Browse files

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

fixes #17670


Co-authored-by: Stefanos Anagnostou <anagstef@gmail.com>
  • Loading branch information...
brandyscarney and anagstef committed Jun 11, 2019
1 parent 055e125 commit 8d2a47e8815167ef804c36fc3ec958ef413b76c0
Showing with 45 additions and 3 deletions.
  1. +4 −2 core/src/components/item/item.scss
  2. +41 −1 core/src/components/item/test/basic/index.html
@@ -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;
}

@@ -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>

0 comments on commit 8d2a47e

Please sign in to comment.
You can’t perform that action at this time.