niandrei niandrei - 7 months ago 14
CSS Question

Resizing div with JavaScript looks wrong

I have a (blue) div that I want to enlarge (vertically) to cover multiple divs (12 of them) of the same size.

The steps I took are to get the div height (with floating point), multiply the value by 12, then apply the new size to the div.

The resulting div doesn't fit the 12th div, and can't understand why.
I think there is something to do with the border/padding, but the variable

already includes those measurements (I have checked this using Chrome's Inspect tools).

Please look at the JSFiddle for the entire code. Any suggestions are welcome.

var theAppointCode = "10071000116";
var theAppointLength = 12;

//get the blue cell height
var appHeadHeight = $("#"+theAppointCode)[0].getBoundingClientRect();
appHeadHeight = appHeadHeight.height;

alert("["+appHeadHeight+"] x ["+theAppointLength+"] = ["+(parseFloat(appHeadHeight)*parseFloat(theAppointLength))+"]");

//multiply the cell height by 12
document.getElementById(theAppointCode).style.height = (parseFloat(appHeadHeight)*parseFloat(theAppointLength))+"px";



An alternative approach which uses the position of the rows to calculate the correct height. This is independent from the thickness of the border.

var appointment = $("#" + theAppointCode),
    row = appointment.closest(".dayrow"),
    endRow = row.nextAll(".dayrow").eq(theAppointLength - 1);  // the row after/below the appointment

appointment.height((endRow.position().top - row.position().top));