PCF - custom dropdown list not visible

Like (0) Share

Report

Posted on 29 Sep 2020 07:45:38 by tzalar

Hi!

I created custom PCF dropdown component, using Semantic UI Dropdown Component. When dropdown list opens, it is hidden behind "parent" div. I tried all CSS tricks that I could think of, and nothing solved my issue, the list is still falling behind the field container where pcf is placed. I want the dropdown to fall over the container.

Anyone faced similar issue and how did you solve it?

Categories:

Power Apps component framework

All responses (2)

Answers (0)

David Pezzoli 230 on 06 Nov 2020 at 17:56:28

Like (0)

Report

Re: PCF - custom dropdown list not visible

I have the same issue....
I see that you can't reference all semantic.css file to PCF because impact to model-driven app form layout, see this link

"When you implement styling to your code components using CSS, ensure that the CSS is scoped to your control using the automatically generated CSS classes applied to the container DIV element for your component. If your CSS is scoped globally, it will likely break the existing styling of the form or screen where the code component is rendered. If using a third-party CSS framework, use a version of that framework that is already namespaced or otherwise wrap that framework in a namespace manually either by hand or using a CSS preprocessor."

So, using Semantic-UI-react for me it's very difficult in PCF because using Semantic UI Theming need another unused reference: craco....

...How did you solve the problem?
ScottDurow 1,039 on 29 Sep 2020 at 17:37:36

Like (0)

Report

Re: PCF - custom dropdown list not visible

This looks like an issue similar to - https://github.com/Semantic-Org/Semantic-UI/issues/3246#issuecomment-359221980
It seems to be due to the way that Material UI creates the drop down inline - rather than a dom element added to the end of the document.