stop table cell from expanding, or set input to width of table cell

Question

I have been playing around with this and cannot seem to get it functioning as I would like.

here is my example, I have a table who's cells i'm making editable by replacing their text content with inputs when the user clicks on them. The input is removed after the focus is lost and the cell contents (the input) are replaced by the updated text.

This all works, fabulous. My issue is the cells resize themselves after the text is replaced by the input. I have set the width of the input to 100%, but that is all I can think of (aside from measuring the cell width and hard-coding it to that width, however I would like to avoid this if possible.)

(see example for html content)

css assume table has ID of #tblListings

#tblListings {
    width: 100%;
}
#tblListings thead {
 background-color: #dedede;   
}
#tblListings td, #tblListings th {
 padding: 6px;   
 border: 1px solid #adadad;
 border-bottom: none;
}
#tblListings tbody tr:nth-child(even) td {
 background-color: #efefef;
}
#tblListings tbody tr:last-child td {
 border-bottom: 1px solid #adadad;
}
#tblListings td input {
    width: 100%;
    border: none;
    outline: none;
    background-color: #ff0;
}

javascript I would presume this can be achieved with CSS, however I will post this to be safe.

$("#tblListings tbody").on("click", "td", function(event) {
    if (event.target.tagName === "INPUT") return;
    var cell = $(this);
    var input = $("<input>", {
        type: "text",
        value: cell.text(),
        maxlength: 128
    });
    cell.empty().css("padding", 0).append(input);
    input.focus();
    input.on("blur", function() {
        cell.css("padding", 6).text(this.value);
    });
});

Not part of the original question; but it would be wonderful if someone could help me make the input 100% height as well. merely setting the height to 100% doesn't work sadly. — rlemon, Nov 27 '11 at 21:56

score 2 · Accepted Answer · answered Nov 27 '11 at 22:14

2

One way to do it would be to set the input to have absolute positioning but keep the original contents in the cell to keep the width the same. See the update here: http://jsfiddle.net/V6rsC/29/.

What I did was set the cell to have relative positioning so that when I set the bounds of the input, it would use the cell instead of the document. I set left, top, right, and bottom of the input to 0px. The width remains the same because the contents are still there, but we cannot see them because the input is in the way. When we are done, the contents are replaced anyway, so know one ever knows the difference.

answered Nov 27 '11 at 22:14

Godwin

9,739
6
40
58

Bingo! answered both of my questions in one. I knew this was a simple css solution. – rlemon Nov 27 '11 at 22:16
Make sure you notice that I updated the jQuery as well, I took out the empty() and padding changes. – Godwin Nov 27 '11 at 22:18
saw that, and noted it in the answer text. – rlemon Nov 27 '11 at 22:19

stop table cell from expanding, or set input to width of table cell

1 Answers1