search

microsoft / Microsoft-Fabric-workload-development-sample

Demonstrates how to implement a Microsoft Fabric workload in .net and typescript
Other
30 stars 16 forks source link

Fluent menu list is covered by other elements #84

Closed q-nicolechoi closed 2 months ago

q-nicolechoi commented 2 months ago

Fluent menu list is covered by other elements.

For example when there are multiple menu buttons arranged vertically: image

<div *ngFor="let x of [1,2,3]">
    <fluent-menu>
        <fluent-menu-button
          appearance="primary"
          shape="round"
          size="medium"
          slot="trigger"
        >
          Menu button
        </fluent-menu-button>
        <fluent-menu-list>
          <fluent-menu-item>
            Menu Item 1
          </fluent-menu-item>
          <fluent-menu-item>
            Menu Item 2
          </fluent-menu-item>
          <fluent-menu-item>
            Menu Item 3
          </fluent-menu-item>
          <fluent-menu-item>
            Menu Item 4
          </fluent-menu-item>
          <fluent-menu-item>
            Menu Item 5
          </fluent-menu-item>
          <fluent-menu-item>
            Menu Item 6
          </fluent-menu-item>
        </fluent-menu-list>
      </fluent-menu>
</div>

When it is inside fluent-accordion image

<fluent-accordion expand-mode="multiple">
            <fluent-accordion-item *ngFor="let i of [1,2,3]">
                <div slot="heading" class="fff">
                    <div class="title list-title">Accordion {{ i }}</div>
                    <fluent-menu>
                        <fluent-menu-button
                            appearance="transparent"
                            shape="round" slot="trigger"
                            icon-Only
                            (click)="$event.stopPropagation()"
                        >
                            <i class="qe-icon-add"></i>
                        </fluent-menu-button>
                        <fluent-menu-list>
                            <fluent-menu-item>
                                Menu Item 1
                            </fluent-menu-item>
                            <fluent-menu-item>
                                Menu Item 2
                            </fluent-menu-item>
                            <fluent-menu-item>
                                Menu Item 3
                            </fluent-menu-item>
                        </fluent-menu-list>
                    </fluent-menu>
                </div>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. ...
            </fluent-accordion-item>
        </fluent-accordion>
amirshwar commented 2 months ago

It seems this issue is a question about working with Fluent UI components in general rather than in context of the workload sample itself. I suggest getting assistance from online resources related to FluentUI components such as Fabric UX MenuList .