search

microsoft / PowerApps-Samples

Sample code for Power Apps, including Dataverse, model-driven apps, canvas apps, Power Apps component framework, portals, and AI Builder.
https://docs.microsoft.com/powerapps
MIT License
1.54k stars 1.7k forks source link

CSS Workaround for Sticky Header breaks Lookups in Quick Create dialogs. #220

Closed curtisrutland closed 2 years ago

curtisrutland commented 3 years ago

Regarding this code from the ModelDrivenGrid example:

https://github.com/microsoft/PowerApps-Samples/blob/95c8e03781add8838b3b921d8edaeb13917e8489/component-framework/ModelDrivenGridControl/ModelDrivenGrid/css/ModelDrivenGrid.css#L11-L19

This does fix the issue of the sticky-header appearing on top of the View Selector and other flyouts, but it also breaks lookup fields in Quick Create dialogs. When this CSS is applied and you open a quick create form that includes a lookup field (Account, for example), when you click into the lookup field, no lookup flyout appears. It is in fact rendering behind the quick create form, since that now has a z-index.

As of right now, the choice is either have broken quick create forms, or have a sticky header that renders on top of the quick create dialog. Please advise.

curtisrutland commented 3 years ago

With enough digging and finally figuring out the correct search terms, I found someone else who has already solved for this issue:

https://nebulaaitsolutions.com/how-to-make-header-of-detailslist-sticky/

The solution is to wrap the <ScrollablePane> with a <div> (or in my case, a <Stack.Item> with styles that contain the following properties:

z-index: 0;
position: relative;

The example code already includes the position attribute:

https://github.com/microsoft/PowerApps-Samples/blob/95c8e03781add8838b3b921d8edaeb13917e8489/component-framework/ModelDrivenGridControl/ModelDrivenGrid/Grid.tsx#L297

So all that is needed to change is adding the z-index property as well. Then the CSS workarounds referenced in the issue post can be removed, as they actively break Dynamics 365.