Unanswered

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

(0) Share

Report

Posted on by thegreatdanton1

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.

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

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.
If yes to #1 above, what's the best way to achieve this?
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.

Categories:

Design & build

I have the same question (0)

All responses (2)

Answers (0)

Jady 147 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
EmadBeshai 806 Moderator on at

Like (0)

Report

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.

Was this reply helpful? Yes No