Question

how can you get a css property before the element is appended?

css

input.inp {
    padding:3px 2px 3px 2px;
}

js

var elm = $('<input class="inp" type="text" />');

alert(elm.css('padding-left'));
td.append(elm);
alert(elm.css('padding-left'));

only the second alert retuns the value…

I want the input element to have width:100%.. but since you can’t do that (when the input has a padding of its own) I need to set the width in pixels

1. get width of the the TD where the INPUT has to be appended…
2. get the left and right padding of the INPUT
3. append the INPUT to the TD with the width of the TD minus the left and right padding of the INPUT

Answer 1

You could insert a hidden input, with the class, get the css properties and the use them.

<input id="getPadding" class="inp" type="text" style="display:none" />

Then after the element is appended You can just get the elements parent width and then set the input to that width minus the amount of padding.. Like so

 $('td input').width($(this).parent().width() - [$('#getPadding').css('padding-left') + $('#getPadding').css('padding-right')])

Alternatively there is a css only solution but it does not work in IE7 and below

td input {
    margin: 0px;
    width: 100%;
    height: 100%;
    border: 0px;
    display: block;
    padding: 2px 5px;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}