Skip to content
Permalink
Browse files

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

fixes #18495
  • Loading branch information...
scrpgil authored and brandyscarney committed Jun 11, 2019
1 parent ef29b5f commit a583902f30bbfefe29f9cb22970a895eec20d8be
@@ -16,13 +16,43 @@
<ion-textarea value="value"></ion-textarea>
<ion-textarea value="44"></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>

<style>
.custom {
--background: papayawhip;
--color: blue;
}
#nowrap {
font-size: 8px;
font-family: monospace;
font-weight: bold;
white-space: nowrap;
}
</style>

<script>
var textarea = document.querySelector('#nowrap');
textarea.value =
`@@@@@@@////////////////@@@(/#@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@/////@@@@@@@@@@@@@@@///////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@////@@@@@@@@@@@@@@@@@///////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@(///@@@@@@@@@@@@@@@@@@@@/////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@///@@@@@@@(/////////&@@@@@@@@//@@@@@@@@@@///#@@@@//////////@@@@/////////////@@@////@@@@//////////@
///@@@@@@@/////////////@@@@@@@///@@@@@@@@@///#@@////@@@@@////(@@/////@@@@@////@@////@@(////@@@@,///
///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@@///@@@@@@@@@@
///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@#///@@@@@@@@@@
///@@@@@@///////////////@@@@@@///@@@@@@@@@///#@////@@@@@@@@///@@////@@@@@@@///@@////@@///@@@@@@@@@@
///@@@@@@@/////////////@@@@@@(///@@@@@@@@@///#@@/////@@@@////@@@////@@@@@@@///@@////@@@////@@@@////
@///@@@@@@@@/////////@@@@@@@@///@@@@@@@@@@///#@@@@//////////@@@@////@@@@@@@///@@////@@@@//////////@
@@///@@@@@@@@@@@@@@@@@@@@@@#///@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@////@@@@@@@@@@@@@@@@@@@////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@/////@@@@@@@@@@@@@/////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@///////////////////@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@`;
</script>
</body>
</html>
@@ -42,6 +42,8 @@

font-family: $font-family-base;

white-space: pre-wrap;

z-index: $z-index-item-input;
}

@@ -89,8 +91,6 @@
resize: none;
appearance: none;

white-space: pre-wrap;

&::placeholder {
color: var(--placeholder-color);

@@ -120,4 +120,4 @@
position: absolute;

pointer-events: none;
}
}

0 comments on commit a583902

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