javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
fixes #17670


Co-authored-by: Stefanos Anagnostou <anagstef@gmail.com>
This commit is contained in:
Brandy Carney
2019-06-11 10:34:41 -04:00
committed by GitHub
parent 055e12570d
commit 8d2a47e881
2 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

42
core/src/components/item/test/basic/index.html
View File

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