CODEWITHSUNDEEP
javascripthtmlcss
Rhys
Rhys

Reputation: 1491

Get dimensions of element including drop shadow

This seems like a suspiciously straight-forward question but having searched StackOverflow and Google and used the usual tricks (getBoundingClientRect, clientWidth, offsetWidth) I've yet to find an answer.

Simply, is there a way to find the width/height of an element including not only border, padding etc, but also the shadow?

See: jsfiddle for an example of how everything returns the width of the element without the shadow.

EDIT: Ideally, I'd prefer not to have to investigate the CSS attribute for the shadow and parse out the dimensions, though perhaps that's the only way.

Upvotes: 7

Views: 2422

Answers (2)

Kalnode
Kalnode

Reputation: 11356

Use a shadowParent class

Here's another technique which worked well in one specific case for me:

Make a shadow parent class which affects it's height, having the same values as the shadow of the child. If you need to, make a new parent div just for this purpose. You can use CSS classes for this, for example: shadow and shadowParent.

Then whenever you need height+shadow, just get the height of the parent.

Advantages:

  • Less complexity in JS trying to figure out height.
  • You control the values in one place (wherever you define the CSS values).

In this case, I simply set some padding on the parent, to account for the childs' shadow. Then I get the height of the parent.

/* ----------------------- */
/* SHADOW */
/* ----------------------- */
.shadow {
    box-shadow: 0px 10px 10px black;
}

.shadowParent {

    /* Apply matching values to some property that affects parent height. */
    /* I used padding, which worked for my context. */
    
    padding-bottom: 10px;  /* Value matches shadow values. */

}
<div id="wrapper" class="shadowParent">
   <div id="content" class="shadow">
     Content + shadow
   </div>
</div>

Upvotes: 0

Collarbone
Collarbone

Reputation: 610

You're right, I agree it's a pretty straight forward question. Here's the problem, when you give an element a box-shadow, the box-shadow is treated like a sub-element with absolute positioning properties to it's parent element. So automatically the placement of that object under it's parent becomes a relative positioning question. They are essentially now two separate objects and need calculated separately.

enter image description here

My only suggestion would be to calculate the box-shadow's x/y positioning and add them to the width/height of the parent element. For example, in your jsfiddle, the box shadow is protruding 10px along the x-axis, and below 10px along the y-axis. With the 5px blur, add 2.5px to either side and then add the height/width to those values:

104px (width) + 10px (x-axis shadow extension) + 2.5 px (blur) = 116.5px width

104px (height) + 10px (y-axis shadow extension) + 2.5px (blur) = 116.5px height

Upvotes: 2

Related Questions