Showing results for 
Search instead for 
Did you mean: 
Regular Visitor

PCF - custom dropdown list not visible



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? 






This looks like an issue similar to -

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.


Advocate V
Advocate V

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? 

Helpful resources

2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (1,960)