Question

There is the following code:

$(".translated").mouseenter(function(){
    if ($(this).hasClass("editable")){
        return;
    }
    var h=$(this).height();
    var w=$(this).width();
    $(this).empty();
    $("<input/>", {
        type: "text",
        height:h,
        width:w,
        value:$(this).text()
        }).appendTo(this);
    $(this).height(h);
    $(this).width(w);
    $(this).addClass("editable");
});

This code removes text from a <div> container and inserts an <input> item into it. But there is the problem: the new <input> item has height larger than the <div> container despite the values of the h and w. How can I fix it?

Answer 1

You need to calculate how much extra space is taken up by the border and padding of the <input> element and then subtract that from the height of the container <div>. This will give you the actual height that you need to set the <input> element:

var h = $(this).height(); // The height of the container <div>
//...
var $newInput = $("<input/>", { type: "text", value:$(this).text()}).appendTo(this);
var fullHeight = newElem.outerHeight();
var innerHeight = newElem.height();
var paddingEtc = fullHeight - innerHeight;
$newInput.height(h - paddingEtc);

You’ll probably have to follow the same method to set the width of the <input> as well.

You can see it working here (height only at the moment): http://jsfiddle.net/XrGxx/