JQuery css() behaviour

Question

Why these 2 instructions don't produce the same render please ?

$("#j_idt14\\:panelGrid label").css({
    "position": "absolute",
    "width": $("#j_idt14\\:panelGrid label").parent().outerWidth() - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-left")) - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-right")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-left-width")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-right-width")) -
        24 + "px"
});

and

$("#j_idt14\\:panelGrid label").css("position", "absolute");
$("#j_idt14\\:panelGrid label").css("width", 
    $("#j_idt14\\:panelGrid label").parent().outerWidth() - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-left")) - 
        parseInt($("#j_idt14\\:panelGrid label").css("padding-right")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-left-width")) -
        parseInt($("#j_idt14\\:panelGrid label").css("border-right-width")) -
        24 + "px");

in first case, width equals 500px and in 2nd case width equals 394px (as expected).

Thank you for clarification.

Jan · Accepted Answer · 2012-10-27 20:16:32Z

3

When the position isn't absolute, the j_idt14\\:panelGrid label element is included in the width calculation of the parent element. My guess is that the j_idt14\\:panelGrid label element is wider than the parent.

When the element's position gets set to absolute, its width is ignored in the calculation since it's no longer contained within the boundaries of the parent.

answered Oct 27, 2012 at 20:16

Jan

5,8573 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Olivier J. Over a year ago

thank you very much if I add $("#j_idt14\\:panelGrid label").css("position", "absolute"); before first case above, it's work so this is a position problem in calculation. I'll use 2 css() instructions so. Ty again

Collectives™ on Stack Overflow

JQuery css() behaviour

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related