Created
June 30, 2022 20:17
-
-
Save giventofly/b3cfaa926d5a1449db14309b27933905 to your computer and use it in GitHub Desktop.
Auto expand contract textarea
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//calculates using newlines | |
//*** text area grow */ | |
const calcNewLines = (value) => { | |
let numberOfLineBreaks = (value.match(/\n/g) || []).length; | |
// min-height + lines x line-height + padding + border | |
//let newHeight = 34 + numberOfLineBreaks * 20 + 12 + 2; | |
let newHeight = 34 + numberOfLineBreaks * 24 + 12 + 2; | |
if (!numberOfLineBreaks) { | |
newHeight = 36; | |
} | |
return newHeight; | |
}; | |
const makeAreaGreatAgain = (e) => { | |
e.target.style.height = calcNewLines(e.target.value) + "px"; | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#deckcode { | |
resize: none; | |
height: auto; | |
//width: 400px; | |
//min-height: 100px; | |
//padding: 5px; | |
//font-size: 14px; | |
overflow: hidden; | |
font-size: 16px; | |
//box-sizing: border-box; | |
width: 100%; | |
padding: 6px 6px 6px 12px; | |
} | |
.import-deck-block { | |
margin-left: auto; | |
display: inline-flex; | |
justify-content: flex-end; | |
align-items: center; | |
//margin-left: 12px; | |
//flex-grow: 1; | |
width: 100%; | |
margin: 12px auto; | |
button { | |
margin-right: 0; | |
margin-left: 12px; | |
color: $text-color; | |
//padding-left: 12px; | |
// padding-right: 12px; | |
font-weight: 700; | |
text-transform: uppercase; | |
img { | |
pointer-events: none; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="import-deck-block"> | |
<textarea type="text" id="deckcode" placeholder="Deck code" autofocus class="autoExpand" rows="1" data-min-rows="1"></textarea> | |
<button class="icon import-deck-code" data-url="'.get_home_url().'/deck-builder"> | |
<img src="'.get_stylesheet_directory_uri().'/assets/media/icons/import.svg" alt=""> | |
</button> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment