Question 293886 in Html Question posted in
Some basic documentation can be found here.

How to format textarea in HTML in a way to not 'move' other elements?

I’m quite new to HTML and I’m developing a platform using Apps Script, this platform is used to analyse certain attributes of some users, accessed through a window which contains all info regarding that user, imported via Google Sheets that I use as a database.

The thing is, I have this ‘description’ like area that can be quite long regarding character number, so I’m using it like a textarea, since it can be used to break lines, but as I increase its width other ‘blank’ areas over it are increased as well, is there a way that I can make it like an independent area? I mean, to not alter other elements attributes?

Here is the code:

            <tr>
              <td class="modal-table-label" style="width:100px"><label for="description" style="width:100px">Desc. Regra</label></td>
            </tr>
            <tr>
            <td>
              <div>
              <textarea name="description" id="description_form" value="" class="info-input-sm" style="width:350px;" rows="5" cols="500" ></textarea>
               </div>
            </td>
            </tr>

And here is an image showing my problem:

Thank you in advance!

Tags:

2

Answers


  1. 0

    What you’re going to want to do, is seperate your "Description" title aswell as your textarea from the rest of your items. Their are many ways of doing this, I suggest you put them each inside a seperate , since they are 2 independant sections.

    Login or Signup to reply.
  2. 0

    You can set a table cell to span multiple columns using the colspan attribute.

    body, textarea {
  font-family: sans-serif;
  font-size: 16px;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid blue;
  padding: 5px;
}

textarea {
  width: 100%;
  border: 1px solid green;
  padding: 5px;
  box-sizing: border-box;
}
    <table>
  <tr>
    <td>Apple Pie</td>
    <td>Banana Smoothie</td>
  </tr>
  <tr>
    <td>Cherry Slice</td>
    <td>Sticky Date Pudding</td>
  </tr>
  <tr>
    <td colspan="2">
      <textarea rows="5"></textarea>
    </td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search