Table keeps increasing in size when I keep selecting an option

Question

I am having trouble with my controls keep causing the table cells increasing.

I have an application here:Application

Please open the app and follow the basic steps below:

1. When you open app, click on the "Add Question" button to append a table row.

2. In the row you appended click on "Open Grid" and select button "3", then open the grid again and select button "4". Keep alternating by selecting buttons "3" and "4" and you should be able to see that the controls keep moving down slightly, meaning the table is increasing slightly each time an option is selected.

Now what is strange is that I have a jsfiddle which contains the same code but it doesn't have this problem in the fiddle, in face the fiddle is the exact way I want my app to be running: http://jsfiddle.net/XM8hG/7/

Now the code below I believe is causing this problem because every time the user selects a option, I want the textarea to remain full height in it's table cell:

Jquery:

     $('.gridBtns').on('click', function()

    {

...

setWidth();

)};

function setWidth() {
    var questionCellWidth = $("#qandatbl_onthefly tbody .question").width();
    var questionCellHeight = $("#qandatbl_onthefly tbody .question").height();
    $(".textAreaQuestion").css({
        "width": (questionCellWidth - 6) + "px",
        "height": (questionCellHeight) + "px"
    });
}

​Now I need the code above for the textarea to remain full height in table cell but what do I need to include or alter in order to be able to stop the table increasing everytime a option is selected?

Actually is there a place where I can put setWidth() so that every textarea in every cell will fill the hegiht for each table cell they are in, rather than going it on option click? Something like it recognises table has expanded and thus it expands the height of the textarea to fill table cell on its own when it realises table cell has increased

Answer 1

You're setting the height of the textarea to be the height of its parent cell, which is going to be at least the same size if not bigger.

In my browser the textarea has a padding of 2px on all sides, so the parent cell is at least 4px larger to accommodate the textarea and its padding. Hence every time you call setWidth() it increases by at least that amount.

If you want the textarea to always fill the cell, you should be setting the size of the table cell and leave the textarea alone - set its width and height properties to 100% so it fills the cell.

---

Edit:

So in the CSS:

.textAreaQuestion { ... width: 100%; height: 100%; ... }

and remove the call to setWidth from the event handler $('.gridBtns').on('click').