[BUG] Person Card hidden behind Fluent UI DetailsList

[aakashbhardwaj619]

The MGT Person component doesn't display the person card correctly on hover inside a Fluent UI DetailsList. When the person card is rendered on hover in an SPFx web part, some part of the person card is hidden behind the DetailsList column.

To Reproduce Steps to reproduce the behavior:

1. Add a Fluent UI DetailsList to a React component in an SPFx web part
2. Render the Person component, with person card on hover enabled, in any of the columns of the list
3. Hover on the Person and observe that some part of the person card is hidden

Expected behavior The person card should render over the DetailsList

Screenshots

Environment (please complete the following information):

• OS: [Windows]
• Browser [Edge]
• Framework [React]
• Context [SharePoint]
• Version [2.2.0-preview.8178bb8]

Code Snippets Render Item Column

const renderItemColumn = (item: any, index: number, column: IColumn) => {
    const fieldContent = item[column.fieldName as keyof any];

    switch (column.key) {
      case 'UserPrincipalName':
        return (
          <div>
            {fieldContent && fieldContent.map((person) => (
              <>
                <Person personQuery={person}
                  view={PersonViewType.oneline}
                  personCardInteraction={PersonCardInteraction.hover}
                  showPresence={true}
                /><br /><br />
              </>
            ))}
          </div>
        );

      default:
        return <span>{fieldContent}</span>;
    }
  };

DetailsList rendering

return (
    <div>
      <DetailsList
        items={allItems}
        setKey="set"
        columns={columns}
        onRenderItemColumn={renderItemColumn}
        onColumnHeaderClick={onColumnClick}
        ariaLabelForSelectionColumn="Toggle selection"
        ariaLabelForSelectAllCheckbox="Toggle selection for all items"
        checkButtonAriaLabel="Row checkbox"
      />
    </div>
  );

[ghost]

Hello aakashbhardwaj619, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[vogtn]

@aakashbhardwaj619

I'm investigating now, seems like some of the css animations applied are messing with the relative z-index of the flyout.

[vogtn]

@aakashbhardwaj619

After some investigation and consulting with the team, unfortunately this isn't something we can support at this time.

It seems that the system used by the DetailsList to render the respective cells relies on 3d transformations which don't respect the standard stacking context. We'd have to make large breaking changes to our flyouts to make this compatible, which would make sense for a later major release. We'll re-evaluate this for the next time.

[deanbot]

@vogtn perhaps the ability to select an arbitrary div to render in could offer a workaround?

[deanbot]

@aakashbhardwaj619 fyi, if you're comfortable removing the row animation for the table you can fix this issue with a small css override:

[selector here for targeting the correct details list] .ms-DetailsRow {
  animation-name: none;
}

[gavinbarron]

I'm going to close this issue as it's rather old and stale now.

If you're still having issues then please do raise a new issue