I have a concern regarding the functionality of Javascript widgets. The widget I'm working on embeds content onto a page without using iframes, which has been effective so far. However, there are instances where certain user layouts cause the widget to display incorrectly. For example, if the widget requires a width of 300px but the parent div is only set to 250px, part of the widget gets cut off.
My question is, what precautions can be taken to avoid this issue? The product manager suggested checking the parent div elements and displaying an alternate message if their size is incorrect. But since this widget needs to work across various browsers, including older ones like IE6, I am concerned about how reliable this method would be. What if I need to traverse the DOM extensively to get an accurate size? I'm also worried about performance implications, as these extra checks could slow down the delivery of my content to users who don't experience layout issues. I don't want to compromise the experience for most users just because of a few outliers.
I am not utilizing any JS libraries in this project, so any solutions proposed should avoid suggesting their use. The reason for this choice was to minimize the page load time required to deliver the widget. While I acknowledge that something like jQuery is lightweight, even 24k compressed seems excessive for a widget delivery that doesn't require core code from a library.
Has anyone encountered similar challenges before? How have you addressed these issues?