I have an anchored popover I want to have dynamic height:
button {
anchor-name: --test-anc;
}
[popover] {
position-anchor: --test-anc;
position-area: bottom span-right;
position-try-fallbacks: flip-block;
position-visibility: anchors-visible;
margin: 0;
border: 1px solid red;
opacity: 0;
transition:
display 300ms ease allow-discrete,
opacity 300ms ease;
/* Fade in on open */
&:popover-open {
opacity: 1;
@starting-style { opacity: 0; }
}
}
<button popovertarget="p">show</button>
<div id="p" popover>
item1<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item
</div>
The CSS Anchor API lets me easily position the drop-down [popover]
element, and provide a position-try-fallbacks
that lets it do simple things (like pop up when the anchor is at the bottom of the visible screen).
However, in this case the dynamic list of items in the drop down may be quite long - I don't want it to go off-viewport. If it's too long to fit on the visible screen I want it to get a scrollbar.
This is for a web component that may appear multiple times in the page - I can't use a second anchor easily.
Is there a solution to this with just CSS?
Is there a minimal JS solution? I already have one with a load of JS looking at bounding rectangles and the like, I want to see if I can replace it with new CSS features.