within an Web Extension I defined a “default_popup” functionality.
My goal is:
If the content get’s to large, I’d like to have a scrollbar for the content, but not for the header or footer. Similar to this native Firefox popup:
But sadly I’m unable to archive this layout within my addon.
Since the content change while interacting within the popup, the popup changes it’s size to fit in the content. I would have to calculate the current popup height to fix my content and allow to show a scrollbar.
But currently I found no way on how to read the actual size of the popup. If I read the height of the body with document.body.getBoundingClientRect().height I get number of the whole document, which exceeded to popup height.
It seems, that window.innerHeight is current popup height. I can read this value within the console if JS is on hold because of a breakpoint.
But I don’t get the right value within my code, after I changed the popup content.
EDIT:
Currently I use a timeout after content change to wait until the popup is resized:
I think you are overcomplicating things…
Why not simply have fixed height for the heading and footer and on the content part use max-height style with overflow: auto to limit maximum height.
simply have fixed height for the heading and footer
This is what I currently have.
on the content part use max-height style with overflow: auto to limit maximum height.
My thought is, that not every one has an equal height screen and the max-height won’t fit in each case.
I could set a quite small max-height, which wouldn’t allow to view a lot content at a whole. And when I use a to tall max-height it might overflow the screen.
I myself use a quite small laptop when driving with a train and I wouldn’t be satisfied if the popup couldn’t show a very large content.
Well, the popup itself has it’s limits that are quite low: 800x600 pixels
So I’m pretty sure more than 99% of your users will never hit the max-height limit .
Maybe on Android this would need a fix… but there you should be able to fix that with media query, something like @media (min-height: 600px).
Anyway, from my experience, every time I want to use JavaScript to fix a style issue, I really really really try to think a better way, because usually there is .
Anyway, from my experience, every time I want to use JavaScript to fix a style issue, I really really really try to think a better way, because usually there is .