How to make textbox and text fit inside table cell?

Question

I'm trying to fit a TextBox and text inside table cell but each time I set TextBox width to 100% the falls out off line. Right now I'm putting the TextBox and text on separate cells, but if I could make them stay on the same cell without the text falling out of line that would be great. Text length may vary so I can't really set TextBox width to a specific %.

*Sample Current: |TextBox|Sample Text|

*Sample Desired: |TextBox Sample Text|

*Sample with my current code, both TextBox and text in one table cell

|TextBox

Sample Text |

Currently this is what I'm using to resize the TextBox to fit table td:

var tbls1 = [
    'tbl-nutritional-histo',
];

for (var tt = 0; tt &lt; tbls1.length; tt++) {
    var tbl1 = document.getElementById(tbls1[tt]).getElementsByTagName('input');                        

    // Loop inside elements of current table
    for (var ii = 0 ; ii < tbl1.length; ii++) {
        // Check if current element is textbox
        if (tbl1[ii].type == "text") {
            // Set textbox size to 100%
            tbl1[ii].style.width = '100%';  
        }
    }   
}

Your `<` signs became `<` in the for loop statement. Is that a typo error? — TaoPR, Jun 02 '15 at 03:13

score 0 · Answer 1 · answered Jun 02 '15 at 03:36

0

'100%' works only when the element's parent element's size is set or inherited. You many explore you web page in a debug tool, like fire bug in firefox or developer tool in Chrome, to see the css settings of the related elements.

answered Jun 02 '15 at 03:36

bearxy39

51
3

score 0 · Answer 2 · edited May 23 '17 at 12:05

This is what I came up with, lengthy but solves my problem. I'll appreciate revisions on my code.

REFERENCES: Getting pure text Get offsetWidth

<html>
<head>
    <style type="text/css">
        input[type="text"]  {
            width: 100%;
        }

        table td {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <table id="tbl-test">
        <tr>
            <td><input type="text">Hello World</td>
            <td>Plain Text<input type="text"></td>
        </tr>
    </table>

    <script type="text/javascript">
        var tbl = ['tbl-test'];

        // Loop thru tbl list
        for (var i=0; i <tbl.length;i++) {
            var tblElements = document.getElementById(tbl[i])
            var tblRowCount = tblElements.rows.length

            // Loop thru table rows
            for (var rows=0; rows<tblRowCount; rows++) {
                var colCount = tblElements.rows[rows].cells.length

                // Loop thru table row columns
                for (var ii=0; ii<colCount;ii++) {
                    var el = tblElements.rows[rows].cells[ii]
                    var inputEl = tblElements.rows[rows].cells[ii].getElementsByTagName('input');

                    var text = el.innerText || el.textContent;

                    // Loop thru elements with tags input
                    for (var t=0; t<inputEl.length;t++) {
                        if (inputEl[t].type == 'text') {
                            // Get td size - length of text
                            inputEl[t].style.width = el.offsetWidth-(text.length) + "px";
                        }   
                    }

                }   
            }

        }
    </script>
</body>

How to make textbox and text fit inside table cell?

2 Answers2