Support for inner width and height.

[AnthonyPanchenko]

It should be possible to track inner width and height.

[ctrlplusb]

Hey @nixegend can you please expand upon your requirements here. I am not quite following you. Thanks!

[jcrben]

Perhaps he's asking about a height calculation which includes the height of children?

I have an parent component with a height of about 1000px and it contains a child which has a height of 1800px. The parent component is actually https://github.com/STRML/react-grid-layout and these children are absolute, so it seems that I need to calculate the size of the grid and set its height to allow elements to flow after it (see also https://stackoverflow.com/questions/9061520/auto-height-on-parent-container-with-absolute-fixed-children).

Are you familiar with this issue? If not, maybe I can create a small demonstration repo.

[felthy]

I came here looking for an option to track width without padding, a la box-sizing: content-box - perhaps that’s what @nixegend meant? It's what I want anyway! So in the example below (screenshot from Chrome devtools) I want sizeme to report width: 420, not width: 460.

[ctrlplusb]

Hey @felthy that makes sense yeah. I don't know the specifics on box-sizing behaviour and the element-resize-detector. Will have to see what options we have to us here.

[felthy]

Oh sorry the box-sizing thing was not really relevant, I only mentioned it to try and explain which width I meant. element-resize-detector is already working fine for me, but for what I'm doing the width within the padding would be more useful. I've just been reading the code, I see you're using getBoundingClientRect() internally, so we’d probably need to subtract padding or something like that. I’m going to look and see how jQuery does it (in jQuery terms this is the difference between jQuery.outerWidth() and jQuery.width()).

[pinkynrg]

+1 It would be really nice to have this feature!

[xiechao06]

+1, I think the SizeMe component's children function could be provided one more argument: the dom element to be measured, using this element it could be easy to get the paddings. namely:

<SizeMe>
  {({ size, el }) => ... }
<SizeMe>

[larrydahooster]

Need this as well. Is this project still maintained @ctrlplusb ? might work on an implementation of this anyway in near future causeI need it for a project

[ctrlplusb]

Yep, still maintained, just haven't need to update it very often as it's quite stable. ☺️

Happy to consider a discussion / PR on the subject. If it doesn't affect performance adversely we can include it.

[larrydahooster]

Thanks for your reply. I will do some research on it. Regarding performance I think it can cause a second render-cycle. It needs to be ensured that it does not result in a endless loop.

The reason for this is:

1. You render the parent content with placeholder (no scrollbars)
2. you render the child content with outer dimeninsions - scrollbars appear,
3. the parent updates it's dimensions -> old width - scrollbar = new width; old height + newly gained height (because of width reduction turning into height gain) = new heigth.

Haven't thought further through it but whenever the child manipulates the parent, I guess an endless cycle can occure.