CSS anchor-API a [popover] element with dynamic height - Stack Overflow

I have an anchored popover I want to have dynamic height:button {anchor-name: --test-anc;}[popover] {p

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>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745517401a4631081.html

相关推荐

  • CSS anchor-API a [popover] element with dynamic height - Stack Overflow

    I have an anchored popover I want to have dynamic height:button {anchor-name: --test-anc;}[popover] {p

    1天前
    40

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信