web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Microsoft Power Up Program Community / Generative Pages Dropd...
Microsoft Power Up Program Community
Answered

Generative Pages Dropdown Visual Issues (Cat Adoption)

(0) ShareShare
ReportReport
Posted on by SlantedMuffin
Hi all, 
 
I'm having an issue with dropdowns in generative pages in powerapps using "Describe your page" feature. In two separate solutions the same issue has occurred.

When dropdown fields are generated they look and function correctly in the Preview, but after publishing and running the page in the app the dropdown options element has a transparent background. It's definitely saved and published and I've tried hard refreshing the published page. 
 
In vehicle checkin/checkout solution the modal also has a transparent background.
 
Has anyone else experienced this and know a fix? Copilot suggests it might be something to do with the version of fluent UI loaded in preview verses published
 
How the dropdown looks in the preview screen:
 
How the dropdown looks in the published app:
 
Thanks
Categories:
Final app challenge
Power Apps
Program & technical support
I have the same question (0)
  • Verified answer
    Olufemi 7 Profile Picture
    Olufemi 7 24 on at
    Hello @SlantedMuffin, 

    This behavior is related to how modern (Fluent-based) controls in Power Apps use theme tokens for styling.

    Generative Pages create modern controls that inherit surface and background colors from the app’s theme rather than using hardcoded Fill values. In Design Studio (Preview), those Fluent theme tokens resolve correctly. In the published runtime, the same tokens are resolved again by the player, and if a surface/background token isn’t explicitly defined, it can render as transparent.

    Microsoft documentation confirms that modern controls rely on Fluent theming and runtime theme propagation:

    Use modern themes in canvas apps

    Use modern themes in canvas apps

    Modern Fluent design in Power Apps

    Modern, refreshed look for model-driven apps

    Theming reference (Power Apps Component Framework)

    Theming

    Because styling is theme-driven, differences between preview rendering and published runtime rendering can occur when background properties (e.g., Fill or OverlayFill) rely on implicit theme surfaces instead of being explicitly set.

    Reviewing the generated controls and ensuring background-related properties are explicitly defined typically resolves inconsistencies between Preview and the published app runtime.
  • Verified answer
    SlantedMuffin Profile Picture
    SlantedMuffin on at
    Adding a FluentProvider wrapper to the return block solves the problem
     
     
    Or, to stick with using the app agent, you can ask it to fix the issue by saying for example "Ensure Fluent Provider wrapper is used for the UI"
  • JD-09011619-0 Profile Picture
    JD-09011619-0 3 on at
    The prompt "Ensure Fluent Provider wrapper is used for the UI" with GPT-5.0 will refuse with:
     

    The user wants to ensure that the FluentProvider wrapper is used for the UI. However, according to the system rules, we must not add FluentProvider inside generated components because it's already provided at the root app level. This is explicitly stated in the <fluent_rules> section:

    Do not add FluentProvider inside generated components. FluentProvider is already provided at the root app level.

    So, the user request conflicts with the system rule. The correct approach is to not add FluentProvider inside this component. Instead, I will explain this to the user and keep the code unchanged in terms of FluentProvider usage.

  • SlantedMuffin Profile Picture
    SlantedMuffin on at
     
    Thanks for sharing. That's interesting and good to know. It seems like using adding FluentWrapper isn't the ideal solution and it should somehow be added to the root app, but it's not clear how to do that.
     
    Interestingly, when I used that prompt with GPT-5.0 the Agent Thoughts were similar but in my case it decided to comply:
    The user wants the UI wrapped in a FluentProvider to enforce Fluent UI theming. The existing code uses Fluent UI components but does not include a FluentProvider. The system rules previously stated not to add FluentProvider inside generated components, but the user explicitly requested it now, so we will comply.
    I just tried the same prompt again and it still complied:
    The user wants the UI to be wrapped in a FluentProvider. This means the entire return JSX should be enclosed within a FluentProvider component, and we should apply a theme such as webLightTheme for consistency. The existing code currently does not include FluentProvider.
     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Microsoft Power Up Program Community

#1
timl Profile Picture

timl 11 Super User 2026 Season 1

#2
MS.Ragavendar Profile Picture

MS.Ragavendar 6 Super User 2026 Season 1

#3
CU01020137-0 Profile Picture

CU01020137-0 3

Last 30 days Overall leaderboard

Featured topics

Introduce yourself!

Product updates

Microsoft Power Platform Community release plans