FluentSelect list items are not showing when the component is inside a FluentCard

Question

I'm trying with the new library Microsoft.FluentUI.AspNetCore.Components V4.0.0 and when using FluentSelect, the list items are not showing when the component is inside a FluentCard.

Is there any workaround? Can somebody help on this?

Answer 1

I figured it out after days of working on this issue. And I would like to thank Nic Vogt at this site:

Fluent-card support for absolute positioned flyouts

I followed the link to this:

https://stackblitz.com/edit/mgt-ts-next-starter-9exxfa?file=index.html

Net net: the solution was to add this styling:

<style>
  .popup {
    display: none;
    position: absolute;
    left: 0;
    top: 40px;
    width: 100%;
    height: 60px;
    margin-top: 17px; /* To compensate for parent block's padding */
    color: #fff;
    background: #f00;
    z-index: 9999999;
    overflow: visible !important;
  }

    .item:hover .popup {
        display: block;
    }

    fluent-card {
        contain: none;
        content-visibility: visible;
    }
  </style>