Skip to main content

Notifications

Community site session details

Community site session details

Session Id : QMFoGVwa2f4JBMoq7gheIl
Power Pages - Design & Build
Unanswered

How can Microsoft Fluent UI styling be integrated with a Microsoft Power Portal?

Like (0) ShareShare
ReportReport
Posted on 30 Jan 2024 00:13:14 by 23

Hi, 

 

A developer working for me is building a Microsoft Power Page. This will have a registration and login function. Once logged in there is a digital form. However, the styling of the form needs a lot of work. For example, radio buttons are on top of each other, as you can see below.

 

thegreatdanton1_0-1706572604570.png

I'm not a developer myself, but I have a few questions:

 

  1. Can the portal form design/styling be changed to incorporate Fluent styling for the majority of the components? For example, I'm looking at https://explore.fast.design/components and there are some slick form elements there. 
  2. If yes to #1 above, what's the best way to achieve this?
  3. The form on the portal is displayed in a way that there are 3 columns. But some of the field labels are long and push the field down to the next line. So in that case, the text box is not in line with the other 2 columns. I presume the form can be customised to have certain rows as 2 columns and others as 3 columns?

Thanks for any advice.

  • EmadBeshai Profile Picture
    806 Super User 2025 Season 1 on 25 Feb 2024 at 10:24:38
    Re: How can Microsoft Fluent UI styling be integrated with a Microsoft Power Portal?

    Hi @thegreatdanton1 ,

     

    Please your developer to edit the CSS classes and modify the needed styles instead of using the Fluent UI, this is based on my long real experience with similar UI issues.

     

    If this post helps you with your problem, please mark this answer as Accepted Solution.
    If you like my response, please give it a Thumbs Up. 

  • Jady Profile Picture
    114 on 31 Jan 2024 at 01:19:02
    Re: How can Microsoft Fluent UI styling be integrated with a Microsoft Power Portal?

    I'd say yes you could add Fluent UI framework into Power Pages, but it would cause more problems than it is worth. Power Pages is built on the Bootstrap UI framework, and the conflicts would be significant, not to mention disrupting the Power Pages Editor. They are fundamentally different. 

    Instead, if you really want Fluent UI look & feel, I would suggest modifying the Bootstrap CSS to look like Fluent UI, and explore the many CSS classes offered in Bootstrap to change how your controls and component are displayed. This will take quite a lot of work in modifying the entire Bootstrap CSS, but at a minimum, changing font-families, form styles and buttons styles to mimic Fluent UI might be enough.  

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

Quick Links

🌸 Community Spring Festival 2025 Challenge 🌸

WIN Power Platform Community Conference 2025 tickets!

Markus Franz – Community Spotlight

We are honored to recognize Markus Franz as our April 2025 Community…

Kudos to the March Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,660 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 66,004 Most Valuable Professional

Leaderboard

Featured topics

Loading started