Question

I have the following jQuery to modify a table cell when clicked — it will enable a user to fill out a text input and on enter, return to the normal <td>.

HTML-

<td class="delivered">
    {{ title.delivery_date|date:"Y-m-d" }}
</td>

JS –

$("td.delivered").click(function () {
    if ($(this).find('#inp').length == 0) {
        var before = $(this).text();
        var title_id = $(this).parent().attr('id');
        var status_type = 'delivery-date'
        $(this).html($("<input/>", {
            id: 'inp',
            style: 'width:70px;',
            placeholder: 'YYYY-MM-DD',
            change: function () {
                selectdone(this, title_id, status_type);
            }
        }));
        $("#inp").focus();
        $('#inp').val(before);
    }
});

The above js works, but there is a quirk about it.

Even though the input element is 70px, it seems to scroll as if the text width were 200px or so. This makes it so that you are unable to see the placeholder after first clicking the td. How would I make it such that that the cursor is always flush left and the text input is 70px in every which way.

Update: This is what the input looks like after entering text and sending it via POST: u'status': [u'\t\t\t\t\t\t\t\t\t\t\t2012-01-01']. In other words, it seems to be starting with 11 tabs in the text input! Why does this occur and how would I get rid of this?

Answer 1

You could wrap your input box in a div with width:70px;overflow:hidden so you’re sure that you won’t see any scrollbars.