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

fix(textarea): inherit white-space for better customization (#18508)

Browse Source 
fixes #18495
This commit is contained in:
scrp
2019-06-12 03:47:37 +09:00
committed by Brandy Carney
parent ef29b5fb04
commit a583902f30
2 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
core/src/components/textarea/test/standalone/index.html
View File

@ -16,6 +16,7 @@
<ion-textarea value="value"></ion-textarea> <ion-textarea value="value"></ion-textarea>
<ion-textarea value="44"></ion-textarea> <ion-textarea value="44"></ion-textarea>
<ion-textarea placeholder="Custom" class="custom"></ion-textarea> <ion-textarea placeholder="Custom" class="custom"></ion-textarea>
<ion-textarea id="nowrap" rows="15"></ion-textarea>
<ion-textarea placeholder="Auto Grow!" auto-grow="true"></ion-textarea> <ion-textarea placeholder="Auto Grow!" auto-grow="true"></ion-textarea>
<style> <style>
@ -23,6 +24,35 @@
--background: papayawhip; --background: papayawhip;
--color: blue; --color: blue;
} }
#nowrap {
font-size: 8px;
font-family: monospace;
font-weight: bold;
white-space: nowrap;
}
</style> </style>
<script>
var textarea = document.querySelector('#nowrap');
textarea.value =
`@@@@@@@////////////////@@@(/#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@/////@@@@@@@@@@@@@@@///////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@////@@@@@@@@@@@@@@@@@///////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@(///@@@@@@@@@@@@@@@@@@@@/////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@///@@@@@@@(/////////&@@@@@@@@//@@@@@@@@@@///#@@@@//////////@@@@/////////////@@@////@@@@//////////@
///@@@@@@@/////////////@@@@@@@///@@@@@@@@@///#@@////@@@@@////(@@/////@@@@@////@@////@@(////@@@@,///
///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@@///@@@@@@@@@@
///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@#///@@@@@@@@@@
///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@@///@@@@@@@@@@
///@@@@@@@/////////////@@@@@@(///@@@@@@@@@///#@@/////@@@@////@@@////@@@@@@@///@@////@@@////@@@@////
@///@@@@@@@@/////////@@@@@@@@///@@@@@@@@@@///#@@@@//////////@@@@////@@@@@@@///@@////@@@@//////////@
@@///@@@@@@@@@@@@@@@@@@@@@@#///@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@////@@@@@@@@@@@@@@@@@@@////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@/////@@@@@@@@@@@@@/////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@///////////////////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@`;
</script>
</body> </body>
</html> </html>

4
core/src/components/textarea/textarea.scss
View File

@ -42,6 +42,8 @@
font-family: $font-family-base; font-family: $font-family-base;
white-space: pre-wrap;
z-index: $z-index-item-input; z-index: $z-index-item-input;
} }
@ -89,8 +91,6 @@
resize: none; resize: none;
appearance: none; appearance: none;
white-space: pre-wrap;
&::placeholder { &::placeholder {
color: var(--placeholder-color); color: var(--placeholder-color);