How to make HTML text area dynamic (ie get taller when width reduces)

user_13378630 0
Viewed 31

https://jsfiddle.net/zarch/btrhuxj9/1/

I have this text area and coloured box that looks okay on a full width screen. But when I reduce the width the text falls out of the box at the bottom. (you can replicate this by minimising the jsfiddle screen)

How can I make the box dynamic height so that it scales?

All pretty new to this, so apologies if this is a newbie question.

  <label for="battery-output"></label>
  <output id="battery-output" for="battery-size battery-usable" name="output">70% of ( 90% of 3.6kWh ) = 2.27kWh per day</output>
  <br>
  <output id="battery-output" for="battery-size battery-usable" name="output2">This will take 1.9 x 30 min charge slots (so we round up to 2 slots)</output>
</div>

.rcorners {
  border-radius: 5px;
  border: 1px solid #ffb347;
  background-color: #ffb347;
  padding: 5px;
  width: 100%;
  height: 60px;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}```
css html jquery
1 Answers

Try to stay away from hard-coded heights. You can see that using a hard-coded height paints you into a pixelated corner at different screen dimensions. Instead, use padding and let the content dictate the height of the element.

Demo

.rcorners {
  border-radius: 5px;
  border: 1px solid #ffb347;
  background-color: #ffb347;

  padding: 10px 5px;
 /*        ~~~~
   Box has 10px padding top/bottom added to element's 
   natural (intrinsic) content height 
 */

  width: 100%;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
<div class="rcorners">
  <label for="battery-output"></label>
  <output id="battery-output" for="battery-size battery-usable" name="output">70% of ( 90% of 3.6kWh ) = 2.27kWh per day</output>
  <br>
  <output id="battery-output" for="battery-size battery-usable" name="output2">This will take 1.9 x 30 min charge slots (so we round up to 2 slots)</output>
</div>

You may wonder when to ever use hard-coded, extrinsic sizing. One solid use-case is for specifying a maximum container width which houses all of your webpage content. Without specifying an overall container width, the container's content will eventually grow to fill the entire screen.

.container {
  max-width: 960px;
}

Further reading

How Big Is That Box? Understanding Sizing In CSS Layout

user_9492170
Related