HTML with contenteditable="true" attribute width not static

Question

I wanted to create a textarea with html-elements inside it. So I found this article.

So I created a div-element with contenteditable="true" attribute.

#call-text-form {
  height: calc(100vh - 350px);
  width: calc(100% - 90px) !important;
}

#call-text-form-textarea {
  margin-top: 5px;
  height: calc(100vh - 405px);
  width: 100% !important;
  max-width: 100% !important;
  overflow: auto;
}

<div class="form-control center-horizontally" id="call-text-form">Test
  <hr style="margin: 0 -12px">
  <div contenteditable="true" id="call-text-form-textarea">f</div>
</div>

But if I enter text into it, which doesn't fit into the div, the width expands proportionally to the entered text. If it occurs vertically, then the height stays fixed and the scrollbar appears.

If I set the width to a fixed value (like 50px) the width stays fixed, but I don't want to limit the width to a fixed value.

So, does somebody has an idea, how to solve this problem? Thanks.

@AHaworth With 100% I mean, I don't want the div to expand to more as 100%. So, if its 300px when created, it should not be wider than 300px. I also tried to set the width to `calc(100% - 90px)` — Jaro826, Aug 30 '22 at 09:00
100% if what - the width of the viewport or the body width or some container' width or what? — A Haworth, Aug 30 '22 at 09:16

Chirag Paryani · Answer 1 · 2022-08-30T11:32:43.373

By default the div will take the entire width of View Port since it's a block element. So you need to update your CSS as below

#call-text-form-textarea {
  margin-top: 5px;
  height: calc(100vh - 405px);
  width: fit-content;
  overflow-y: auto;
}

notice that we're using 'width: fit-content;' what this will do is keep the width of the div equivalent to the content in it. Hope this helps

Please find a working pen for the same below Codepen

[UPDATED SOLUTION]

You can use max-width as below

#call-text-form-textarea {
  margin-top: 5px;
  height: calc(100vh - 405px);
  width: fit-content;
  max-width: 100%;
  overflow-y: auto;
}

OR

You may use word-break property

#call-text-form-textarea {
      margin-top: 5px;
      height: calc(100vh - 405px);
      width: fit-content;
      word-break: break-word | break-all;
      overflow-y: auto;
    }

Hi, thanks for your help. But so the width is also not static. It gets larger than the window ^^. — Jaro826, Aug 30 '22 at 08:58
You can use max-width or word-break property to avoid the field from overflowing from the window. Have a look at the solution I have added under Updated Solution section. — Chirag Paryani, Aug 30 '22 at 11:33

score 0 · Accepted Answer · answered Aug 30 '22 at 17:22

0

The solution was max-width: 100vh.

Thanks to the helpers

answered Aug 30 '22 at 17:22

Jaro826

13
2

HTML with contenteditable="true" attribute width not static

2 Answers2