Posted 1 January 2022, 8:48 am EST
I’m using the wj-popup element in Angular2 to host a component, and the contents of that component need to scroll if required.
In my source, the html looks like this:
<wj-popup #mainImages class="scrollable-container" style="max-height:50%;height:50%;"> <app-scrollablegallery></app-scrollablegallery> </wj-popup>
but when the code is rendered in the dom, it looks like this:
<wj-popup #mainImages class="scrollable-container" style="max-height:50%;height:50%;"> <div> <app-scrollablegallery></app-scrollablegallery> </div> </wj-popup>
i.e. an extra
container is synthesised around my actual content.I’ve simplified that a lot, but what it boils down to is that I need to be able to apply “height: 100%” to the mystery div in order for the to be constrained and for the scrolling to kick in as required.
For some reason, I don’t seem to be able to get this to work.
If I inspect the DOM, and manually apply “height:100%” to the style attribute of the
If I attempt to do it via CSS:
wj-popup.scrollable-container > div {
background-color: pink;
height: 100%;
}
the class is not applied to the
But if I attempt to target the parent with:
wj-popup.scrollable-container {
background-color: red;
}
the class is applied to the parent in the DOM (and I can see it’s red for debugging purposes).
I can’t for the life of me see what I’m doing wrong?
Is there any particular trick to hosting scrollable content within a wj-popup I should be aware of?
