cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
tzalar
Regular Visitor

PCF - custom dropdown list not visible

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? 

 

 

tzalar_0-1601365443797.png

 

2 REPLIES 2

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.

 

David_Pezzoli
Kudo Collector
Kudo Collector

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

Announcements
Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Government Carousel

New forum: GCC, GCCH, DoD - Federal App Makers (FAM)

In response to the unique and evolving requirements of the United States public sector, Microsoft has created Power Apps US Government.

Users online (2,085)