dynamic table setting td align in IE

[asyouwish]

Hello,

Problems with IE, works fine in FireFox.

Building tables with javascript. Everything works fine until I resize an inputfield, type text, in a td. When that is done I want all the td's in the same column to align = center so their inputfields, type text, that now are smaller than the one I resized end up in the middle, straight below the bigger one.


I've tried currentTd.setAttribute("align", "center") and currentTd.align = "center".

I know I'm looking at the right td and all, setting other things like borderColor etc works fine but not the align.

Any ideas? Thank you for taking your time.

Regards,
Magnus

[acoder]

Can you post your code where the problem occurs?

[asyouwish]

Couldn't delete. This should have been a reply to previous post.

[asyouwish]

Can you post your code where the problem occurs?

Hi,

The code below shows how I create the tablerows and tabledata. After that a user can mark any of the toprow columns and increase the size of the <input type="text"> node. This is done by grabbing the node, getting the size, adding 1 and reseting it. That's the last code I added.

When the resizing is done I expect the items in the same column, straight below to line up in the center of the td, or right when I set align so.

Works fine in FF but not in IE. Really really annoying.

// Loop nr of rows
for(var r = 0; r < nrRows; r++) {
// Create current row
var currTr = document.createElement("tr");
 
// Loop nr of columns for each row.
for(var c = 0; c < nrCols; c++) {
// Create current column.
var currTd = document.createElement("td");
 
// Figure out current td's id
var currTdId = "matrixtd_" + currMatrixNr + "_td_" + itemCnt;
currTd.setAttribute("id", currTdId);
currTd.setAttribute("align", "center");
currTd.style.width = "50px";
currTd.style.border = "1px dotted #AAAAAA";
 
 
// Create element to go inside td
var tdContent = document.createElement("input");
tdContent.setAttribute("type", "text");
tdContent.setAttribute("size", 10);
tdContent.setAttribute("id", "matrixText_" + currMatrixNr + "_" + itemCnt);
 
// Create element to go inside td
var tdContent = document.createElement("input");
tdContent.setAttribute("type", "text");
tdContent.setAttribute("size", 10);
 
 
 
 
******CODE TO RESIZE*******
else if(tmp[0] == "matrixtd") {
var curr_item_child = curr_item.firstChild;
var curr_size = curr_item_child.getAttribute("size");
var new_size = parseInt(curr_size) + parseInt(param);
 
if(new_size < 1) {
new_size = 1;
}
 
curr_item_child.setAttribute("size", new_size);

[acoder]

Is this all of the code? I notice no appendChild() statements.

Is this a problem when resizing or when creating the table?

[asyouwish]

Is this all of the code? I notice no appendChild() statements.

Is this a problem when resizing or when creating the table?

No, this is far from all the code but this would be the parts involved in creating, resizing and aligning the table and it's content. The appendChild() statements comes right after the first bit of code.

It's as if IE doesn't respond to setAttribute("align", "center"). Just to be sure I'm barking up the right tree I've tried all sorts of combinations. I've set it to right, changed colors, fonts and borders. I've tried going for the property by typing currTd.align. It all works in FF but not IE...well, borders etc works for IE too but not the align.

[asyouwish]

Is this all of the code? I notice no appendChild() statements.

Is this a problem when resizing or when creating the table?

This is the entire code for creating the table.

//
// Function to create matrix.
//
function createMatrix() {
    var contentDiv = document.getElementById("div_content");
    var matrix = document.getElementById("matrix");
    var nrCols = document.getElementById("nrMatrixColumns");
    var nrRows = document.getElementById("nrMatrixRows");
 
    // Variable to keep track of which item in matrix we're creating.
    // Used in name and id.
    var itemCnt = 1;
 
    // Add one to both rows and cols since we need column and row names.
    nrCols = parseInt(nrCols.value) + 1;
    nrRows = parseInt(nrRows.value) + 1;
 
    // Calculate width for table. Nr columns * 50
    var defaultTableWidth = (nrCols * 50) + "px";
 
    // Figure out current matrix number, in this question.
    var currMatrixNr = parseInt(matrix.value) + 1;
 
 
    //
    // Start creating table.
    //
 
    // Table
    var myTable = document.createElement("table");
    myTable.style.width = defaultTableWidth;
    myTable.style.position = "absolute";
    myTable.style.top = "10px";
    myTable.style.left = "10px";
    myTable.style.border = "1px dotted #AAAAAA";
    myTable.setAttribute("id", "matrix_" + currMatrixNr);
    myTable.ondblclick = function (evt) { beenSelected(this);};
 
    // Tablebody
    var myTableBody = document.createElement("tbody");
 
    // Loop nr of rows
    for(var r = 0; r < nrRows; r++) {
        // Create current row
        var currTr = document.createElement("tr");
 
        // Loop nr of columns for each row.
        for(var c = 0; c < nrCols; c++) {
            // Create current column.
            var currTd = document.createElement("td");
 
            // Figure out current td's id
            var currTdId = "matrixtd_" + currMatrixNr + "_td_" + itemCnt;
            currTd.setAttribute("id", currTdId);
            currTd.setAttribute("align", "center");
            currTd.style.width = "50px";
            currTd.style.border = "1px dotted #AAAAAA";            
 
 
            // Create element to go inside td
            var tdContent = document.createElement("input");
            tdContent.setAttribute("type", "text");
            tdContent.setAttribute("size", 10);
            tdContent.setAttribute("id", "matrixText_" + currMatrixNr + "_" + itemCnt);
 
            // Is this first row in table? Columnnames.
            if(r == 0) {
 
                // Check if first td, top left
                if(itemCnt != 1) {
                    currTd.onclick = function (evt) { beenSelected(this);};
                    tdContent.style.background = "#EEEEEE";
                }
                else {                
                    tdContent.style.background = "#AAAAAA";
                }
 
                // Append tdContent
                currTd.appendChild(tdContent);
            }
            else { // Following rows. Rownames
 
                // Check if first column, is so allow user to set rowname.
                if(c == 0) {
                    currTd.onclick = function (evt) { beenSelected(this);};
                    tdContent.style.background = "#EEEEEE";
                }
 
                // Append tdContent
                currTd.appendChild(tdContent);
            }
 
            // Add td to tr
            currTr.appendChild(currTd);
 
            // Increment item counter.
            itemCnt++;
        }
 
        // Append tr to tablebody
        myTableBody.appendChild(currTr);
    }
 
    // Append table body to table and table to content div.
    myTable.appendChild(myTableBody);
    contentDiv.appendChild(myTable);
 
    // Update keep_track
    matrix.value = currMatrixNr
}

[acoder]

This may be a pure CSS bug in IE. If you try the same code as pure HTML/CSS without any JavaScript with one input element larger than the ones below, do you see the same problem? You may find this article useful.

[asyouwish]

This may be a pure CSS bug in IE. If you try the same code as pure HTML/CSS without any JavaScript with one input element larger than the ones below, do you see the same problem? You may find this article useful.

Hi,

Yes, I code a little piece and tried it, works fine in IE too. Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 
    <head>
        <script language="javascript">
            function showWidth() {
                var tmp1 = document.getElementById("td_1");
                var tmp2 = document.getElementById("td_2");
                alert("1: " + tmp1.scrollWidth + " / " + tmp1.scrollHeight + " offsets: " + tmp1.offsetWidth + " / " + tmp1.offsetHeight +
                        "\n2: " + tmp2.scrollWidth + "  /  " + tmp2.scrollHeight + " offsets: " + tmp2.offsetWidth + " / " + tmp2.offsetHeight);
            }
 
            function moveRight() {
                var tmp = document.getElementById("moveTd");
 
                if(tmp.align == "left") {
                    tmp.align = "center";
                }
                else if(tmp.align == "center") {
                    tmp.align = "right";
                }
                else if(tmp.align == "right") {
                    tmp.align = "left";
                }
            }
        </script>
    </head>
 
<body>
 
    <table style="border:1px dotted #AAAAAA">
        <tr>    
            <td style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
            <td style="border:1px dotted #AAAAAA"><input type="text" size="20"></td>
            <td style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
        </tr>
        <tr>    
            <td style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
            <td align="left" id="moveTd" style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
            <td style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
        </tr>
        <tr>    
            <td style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
            <td style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
            <td style="border:1px dotted #AAAAAA"><input type="text" size="10"></td>
        </tr>
    </table>
 
 
    <div>
    <div id="container" style="position: relative; top: 20px; left: 20px; border: 1px dotted #AAAAAA">
        <div id="row_1">
            <div id="td_1" style="position: relative; top: 2px; left: 3px; float: left; padding: 2px 2px"><input type="text" size="10"></div>
            <div id="td_2" style="position: relative; top: 2px; left: 3px; float: left; padding: 2px 2px;"><input type="text" size="20"></div>
            <div id="td_3" style="position: relative; top: 2px; left: 3px; padding: 2px 2px;"><input type="text" size="10"></div>
        </div>
 
        <div id="row_1">
            <div id="td_4" style="position: relative; top: 2px; left: 3px; float: left; padding: 2px 2px"><input type="text" size="10"></div>
            <div id="td_5" style="position: relative; top: 2px; left: 3px; float: left; padding: 2px 2px;"><input type="text" size="10"></div>
            <div id="td_6" style="position: relative; top: 2px; left: 3px; padding: 2px 2px;"><input type="text" size="10"></div>
        </div>
 
    </div>
    </div>
 
    <button type="button" onclick="showWidth()" style="position: relative; top: 20px;">Show width/height</button>
    <button type="button" onclick="moveRight()" style="position: relative; top: 20px;">Move right</button>
 
</body>
</html>

[acoder]

I'm not sure what the problem might be, but if you look at the innerHTML of the table in IE, you'll see that the align gets set to "middle" instead of "center" for some reason.