Automatic scaling of textarea height - html

Question

I am trying to display a double column layout. In the left column there is a picture which can be displayed as 30% or the available width but no more than 300px. In the right column there is a description that spans the rest of the browser width.
I do not know a priori how long the description is and I want to limit the height of the description field so I am using textarea to enable scrolling if needed.
This is my current HTML code:
<div class="tile-panel">
<div class="tile-preview-panel">
<img class="tile-img" src="{{ thumbnail_url }}">
</div>
<div class="tile-desc-panel">
<textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
</div>
</div>
And my CSS:
.tile-panel {
width: 100%;
overflow: auto;
}
.tile-preview-panel {
width: 30%;
float:left;
max-width: 300px;
}
.tile-desc-panel {
overflow: hidden;
}
.tile-img {
width: 100%;
}
.tile-description {
resize: none;
background-color:inherit !important;
width: 100%;
}
.tile-description[readonly] {
cursor: default; !important;
}
The only remaining bit is the height of the textarea. I want it always to be the height of the tile-preview-panel, regardless of the width of the browser. Is this achievable with pure CSS?

Answer 1

Here is a start, this one using your existing textarea,
.tile-panel {
display: table;
width: 100%;
}
.tile-preview-panel {
display: table-cell;
width: 30%;
}
.tile-desc-panel {
display: table-cell;
position: relative;
}
.tile-img {
width: 100%;
}
.tile-description {
resize: none;
background-color:inherit !important;
width: 100%;
height: 100%;
box-sizing: border-box;
left: 0;
top: 0;
position: absolute;
}
.tile-description[readonly] {
cursor: default; !important;
}
#media (min-width: 1000px){
.tile-preview-panel {
width: 300px;
}
}
<div class="tile-panel">
<div class="tile-preview-panel">
<img class="tile-img" src="http://lorempixel.com/300/300/sports/1/">
</div>
<div class="tile-desc-panel">
<textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
</div>
</div>
and here is a version using a div instead, so you can style the text more, use links etc.
.tile-panel {
display: table;
width: 100%;
}
.tile-preview-panel {
display: table-cell;
width: 30%;
padding-right: 5px;
}
.tile-desc-panel {
display: table-cell;
position: relative;
background-color: #ddd;
border: 1px solid #999;
}
.tile-img {
width: 100%;
vertical-align: top;
}
.tile-description {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
overflow: auto;
padding-left: 10px;
}
#media (min-width: 1000px) {
.tile-preview-panel {
width: 300px;
}
}
<div class="tile-panel">
<div class="tile-preview-panel"><img class="tile-img" src="http://lorempixel.com/300/300/nature/5/"></div>
<div class="tile-desc-panel">
<div class="tile-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
Also flex can be used, though it has slightly less browser support.
.container {
display: flex;
width: 100%;
}
.pic {
flex: 0 0 20%;
max-width: 200px;
padding-right: 10px;
}
.text {
flex: 1;
position: relative;
overflow: auto;
background-color: #ddd;
border: 1px solid #999;
}
.pic img {
width: 100%;
vertical-align: top;
}
.text div {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
padding-left: 10px;
}
<div class="container">
<div class="pic">
<img src="http://lorempixel.com/300/300/nature/1/">
</div>
<div class="text">
<div class="tile-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>

Answer 2

i would use javascript for this
put this in the head
<script>
function sameheight(){
var divHeight = document.getElementById('DIV ID YOU WANT TO GET HEIGHT OF').style.height;
document.getElementById('DIV ID YOU WANT THE SAME SIZE').style.height = divHeight;
}
</script>
And put on your body
<body onload="sameheight()">

Answer 3

This should work:
.tile-panel {
width: 100%;
position: relative;
}
.tile-preview-panel {
position: relative;
width: 74%;
}
.tile-desc-panel {
position: absolute;
top: 0;
right:0;
bottom:0;
margin-left: 1.5%;
width: 24.5%;
height: 100%;
background: #232323;
overflow: hidden;
}
.tile-img {
width: 100%;
}
.tile-description {
resize: none;
background-color:inherit !important;
width: 100%;
}
.tile-description[readonly] {
cursor: default; !important;
}
textarea {
border: none;
}
<div class="tile-panel">
<div class="tile-preview-panel">
<img class="tile-img" src="http://placehold.it/640x260">
</div>
<div class="tile-desc-panel">
<textarea readonly class="form-control tile-description"> {{ desc }} </textarea>
</div>
</div>

Answer 4

Another variant of using javascript as #user1899614 suggested but with ES6 and getBoundingClientRect() method:
const makeDimensionsEqual = (someTextareaSelector, someParentElementSelector) => {
document.querySelectorAll(someTextareaSelector)[0].style.height =
document.querySelectorAll(someParentElementSelector)[0]
.getBoundingClientRect().height + "px"
}
const someTextareaSelector = '...'
const someParentElementSelector = '...'
makeDimensionsEqual(someTextareaSelector, someParentElementSelector)