How to create two textareas in same GUI

[julianschmuckli]

Hello,

I'm new to SVG to design GUI's. Currently, I'm trying to create an header title with two rows and a content body with x rows.

Here is my code:

<svg class="background">
  <g>
    <textarea id="name" x="5" y="5" width="100%-10">Hello World!</textarea>
    <textarea id="stationboard" x="5" y="50" width="100%-10">sdjfjsdlkfsdkfjs dfjsdkfsdfjsd lkfjsdfkjsdfkl ksdflksdjfskdlf sdjkfjdslkf kdsfjklsdf</textarea>
  </g>
</svg>

So in the view, I only see the header title. Both are filled with white. Background is black.

Thanks for every response.

[JonFitbit · Accepted solution]

Try this:

<svg class="background">
  <g>
    <text id="name" x="5" y="30" width="100%-10" height="20" font-family="System-Bold" fill="white">Hello World!</text>
    <textarea id="stationboard" x="5" y="$" width="100%-10" font-family="System-Regular" fill="white">sdjfjsdlkfsdkfjs dfjsdkfsdfjsd lkfjsdfkjsdfkl ksdflksdjfskdlf sdjkfjdslkf kdsfjklsdf</textarea>
  </g>
</svg>

There is a single-line <text> for the header, then the <textarea> for multi-line. Y=$ means start from the bottom of the previous element.

You'll probably want to move some of those attributes into your stylesheet.