1

I am using microsoft-graph-toolkit react in SPFx 1.15.0 webpart I have an Ag-Grid rows each with a cell containing a Person

        <Person  personQuery={params.data.RequestFor.Email} showPresence={true}
            view={PersonViewType.oneline} 
            personCardInteraction={PersonCardInteraction.hover} >
        </Person>

when users hover the default PersonCard appears under the other grid rows and doesn't show on top even though I set the z-order to 13000000 Is there another way to make it show on top of everything? When I add a template with PersonCard, I do not see anything

Thank you

Ofer Gal
  • 707
  • 1
  • 10
  • 32
  • at a guess there's something in the containing component causing z-index issues that is exacerbated by web components not directly inheriting CSS. Can you share a repro using https://stackblitz.com/edit/mgt-starter-react-ts?file=App.tsx as a starting point? – GavinB Aug 24 '22 at 20:11
  • 1
    I already figured out a good work around. in the click event I show a https://developer.microsoft.com/en-us/fluentui#/controls/web/callout that contains the PersonCard. – Ofer Gal Aug 26 '22 at 06:09

1 Answers1

1

For anyone with same issue, use a FluentUi callout to show the same persons PersonCard (no need for a div around it) it will show at the highest z-order and figure out if to show up or down based on the location in the browser.

Ofer Gal
  • 707
  • 1
  • 10
  • 32