CODEWITHSUNDEEP
javascriptcssweb-componentshadow-dom
Leo
Leo

Reputation: 4428

Available height and width for a web component?

I am writing a web component for which I need to know the available height and width when a user drops it on their web page. The web component wraps everything in a Shadow DOM and includes potentially scrollable part at least in the height direction. Beside that it includes things like <details><summary>....

I am trying to find a strategy for this. "Available height and width" may not be very well defined in this scenario.

Any suggestion for what I can use? Any suggestion for clarifying my question?

Upvotes: 0

Views: 650

Answers (1)

niiyeboah
niiyeboah

Reputation: 1359

I am sorry but your description is quite confusing to be honest. If you do not provide an image or a coding example it will be hard for people to help.

That being said, I have a feeling you are trying to solve a problem that should not be done by the web-components implementation and should rather be solved by the user. For instance, if you need the component to have a minimum height in order to display the image and the details then give it a min-height (which is maybe set dynamically based on data) and it should be up to the user to use it correctly (i.e. put in a place that has enough space).

Or if you would like the component to somehow be responsive, I think you could maybe use the ResizeObserver API which would allow you to observe changes to the components width and height. Note that it is currently not available in Safari or IE. If you need to support those it would need a polyfill like this one.

Upvotes: 1

Related Questions