CODEWITHSUNDEEP
javascripthtmlcssd3.jssvg
somethin
somethin

Reputation: 127

Textarea do not show in nested svg

I embed textarea in foreignObject in a nested svg, but the textarea cant show in my latest chrome. Can some one help me? Thanks in advance!

textarea {
  resize: none;
  width: 128px;
  height: 20px;
  font-size: 13px;
}
<svg width="1000" height="200">
  <foreignObject x="35" y="10" width="130" height="22">
    <input type="text" maxlength="20" style="width: 128px;">
  </foreignObject>
  <svg xmlns="http://www.w3.org/2000/svg" class="node" x="170" y="0">
    <foreignObject x="20" y="0" width="143" height="32">
      <p>text not show after input charactors below</p>
      <textarea contenteditable>112233112233112233112233112233112233</textarea>
      <div>123</div>
    </foreignObject>
  </svg>

Upvotes: 1

Views: 827

Answers (1)

user7207170
user7207170

Reputation:

In the following line of code you've limited your foreignObject container size to 143px vs 32px and thus your paragraph tag as well as the text area gets cut off.

<foreignObject x="20" y="0" width="143" height="32">

If you modify/increase the size, they'll show up:

<foreignObject x="20" y="0" width="100%" height="200">


textarea {
  resize: none;
  width: 128px !important;
  height: 20px !important;
  font-size: 13px;
}
<svg width="1000" height="200">
  <foreignObject x="35" y="10" width="132" height="22">
    <input type="text" maxlength="20" style="width: 128px;">
  </foreignObject>
  <svg xmlns="http://www.w3.org/2000/svg" class="node" x="170" y="0">
    <foreignObject x="20" y="0" width="100%" height="200">
      <p>text not show after input charactors below</p>
      <textarea contenteditable>1111111111111111111111111111114322432</textarea>
      <div>123</div>
    </foreignObject>
  </svg>
  </svg>

Upvotes: 2

Related Questions