[RESOLVED] Dynamic textarea style quirk

[ixalmida]

I'm dynamically adding a textarea box via Javascript to a form. The box needs to mimic existing textarea boxes (populated from PHP). I'm encountering a style glitch that I can't seem to get past.

Normally, when you click into a 2-row textarea box, the cursor appears in the top row of the box. With the dynamically-added textarea box, the cursor is centered and spans both rows. When you begin typing, the text is vertically centered rather than in the top row. I'd like my application to appear professional, so I'm not thrilled with this style glitch.

Here is the Javascript that adds the textarea box (the vertical-align attribute doesn't seem to help):

var cell3 = row.insertCell(2);
var element3 = document.createElement('input');
element3.type = 'textarea';
element3.name = 'summary[]';
element3.setAttribute('rows', '2');
element3.setAttribute('cols', '40');
element3.setAttribute('style','height: 2.8em; width: 320px; vertical-align: top;');
cell3.appendChild(element3);

Here is the normal HTML version generated by PHP:

<td><textarea name="summary[]" style="height: 2.8em; width: 320px;"></textarea></td>

See attachment for a screen-shot of the glitch (and forgive my lame art).

The design is almost exclusively for Firefox, btw.

[dagon]

seen it once before, it was related to one of the style elements, you may like to try fiddle with them and see what happens.

[johanafm]

It's actually a completely different type of error. There is no such thing as an input element of type textarea, but there is a textarea element.

var o = document.createElement('textarea');

Input elements default to type text, and those are always single line. Assigning textarea to the type attribute will have no effect at all.

[ixalmida]

Ahh...that would explain why I was seeing some oddities when it was viewed with the dev toolbar. That's what I get for trusting an online tutorial.

Thanks for the help!

[ixalmida]

Meh. Didn't work. Tried a bunch of styles and those were bust as well, since vertical-align apparently not a supported property of a textarea.

However, it turns out I can use a much simpler solution here. Since the row I'm trying to produce contains all array elements, I can simply display one default row at the end of the table and then clone it as needed. This ensures that the added row will match the previous row.

I also needed an "Delete Row" button, but I didn't want to remove rows that were pre-populated (only the ones added by the user), so I figured out a way to prevent deleting my sample (clone) row. I've included it below.

var newRowCount = 0;

  function cloneRow() {
    var root = document.getElementById('myTable').getElementsByTagName('tr')[0].parentNode;
    var rows = root.getElementsByTagName('tr');
    var rowcount = rows.length - 1;
    var obj = rows[rowcount].cloneNode(true);
    root.appendChild(obj);
    newRowCount++;
    }

  function delRow() {
    if(newRowCount > 0) {
      var tbl = document.getElementById('myTable');
      var lastRow = tbl.rows.length - 1;
      tbl.deleteRow(lastRow);
      newRowCount--;
      }
    }