How to expand textarea?

Question

I want to expand textarea but it isn't working with margin-top like this:

#sqlcontainerLoggedInPage2 {
  margin-top: 60px;
}

<div class="container-fluid" id="sqlcontainerLoggedInPage2">
  <textarea id="diary" class="form-control"><?php echo $diaryContent; ?></textarea>
</div>

How do I do that?

if you want to expand textarea shouldnt you add more height to it — Chris Li, Sep 10 '18 at 17:10
Possible duplicate of [Should I size a textarea with CSS width / height or HTML cols / rows attributes?](https://stackoverflow.com/questions/3896537/should-i-size-a-textarea-with-css-width-height-or-html-cols-rows-attributes) — Alexander Lallier, Sep 10 '18 at 17:19
it worked, but is there a way of doing it with margin and/or padding? — Dominick Torres, Sep 10 '18 at 17:35
paddings and margins are outside the content. You can increase them, but the space for the content will stay the same unless you change width/height — YakovL, Sep 10 '18 at 18:31
You aren't even setting a margin on the textarea; you added it to the container div — j08691, Sep 10 '18 at 18:32

score 0 · Answer 1 · answered Sep 10 '18 at 17:39

height cannot be set using margin.

If you want the textarea to take up all of the height of its parent element, then the parent element must have its height set to a definitive amount and then the textarea can have its height set to 100%.

#sqlcontainerLoggedInPage2 {
  height: 60px;
}

textarea { height:100%;}

<div class="container-fluid" id="sqlcontainerLoggedInPage2">
  <textarea id="diary" class="form-control">
   <?php echo $diaryContent;?>
  </textarea>
</div>

How to expand textarea?

1 Answers1