PiotrS PiotrS - 9 days ago 5
CSS Question

Dynamically increase textarea and change position div

Is possible decrease class="Content" when textarea increasing?



$('textarea').on({input: function(){
var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
$(this).css({'height':totalHeight});
}
});

.OuterDiv
{
width:200px;
height:300px;
border:1px solid #000;
position:relative;
}
.Content
{
width:200px;
max-height:250px;
background-color:grey;
overflow:auto;
}
.text
{
resize:none;
position:absolute;
bottom:0;
left:0;
width:194px;
min-height:43px;
max-height:145px;
background-color:rgba(250, 120, 30,1);
font-size:16px;
font-family:Arial;
overflow:auto;
word-wrap:break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="OuterDiv">
<div class="Content">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker

</div>
<textarea class="text" placeholder="Write some text..."></textarea>
</div>





Is possible dynamically increase to up height textarea and once decrease class="Content" (make scroll bar in class="Content")

Answer
$('textarea').on('input', function() {
    $(this).outerHeight(0); // reset height to reinitialize scrollHeight
    var scrollHeight = parseInt($(this).prop('scrollHeight'));
    $(this).height(scrollHeight);
    $(this).prev('.Content').outerHeight(300 - $(this).outerHeight());
});

https://jsfiddle.net/81vuv33j/

(I have simplified the CSS a bit since there seems to be a lot of non relevant data for this question. Let me know if I have missed something relevant)

jQuery Docs:

Comments