cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
TheIntern
Helper I
Helper I

custom styling for OOB popups

I have a portal for which i have custom styling applied to inputs and buttons. When I open any entity form to create/edit my record via a dialog (as opposed to a web page), the styling is not reflected on the dialog.

As a workaround, I tried adding my stylesheet to the dialog by appending the <style> tag dynamically to my entity form when it loads (in the entity form's custom javascript - document.ready function). But on slower networks, when there is a delay in loading the form, the previous styling is shown for a couple of seconds, and then the portal styling gets applied.

 

Is there a way to always apply styling to the dialogs so it works fine for slower networks as well?

4 REPLIES 4
ragavanrajan
Super User
Super User

@TheIntern , 

 

JFYI. These are the precedence portal will consider in terms of applying css 

1. portal.theme.css 

2. custom.css ( any custom styles) or any third party css framework 

3. web pages - custom css style 

4. Entity / Web form - custom css styles 

 

so in your case you are in the 4 th precedence- so it may try to check for the first 3 and then applying your custom 4 th one. 

 

You can inspect and find the appropriate element on your entity form and try to add it in the step 2 with !important tag.  

 

Step 2 will be in your case by going in to portal studio > themes > add custom.css 

 

Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

 

Hi @ragavanrajan 

 

Any styling i add to the web page/entity form does not apply on opening a dialog on the page as it renders an iframe within the popup. it works fine on the page itself, but not on the bootstrap modal.

I wanted a way to apply page/form styling to the popup as well, without additionally appending a <style> tag through code.

OliverRodrigues
Super User II
Super User II

hi @TheIntern 

I understand you are adding your CSS in the Web Page level (either JSS or HTML fields). 

What you should do here is adding your CSS to a Web File. Any CSS web file is loaded for the entire Portals and it will apply for all your pages, including modal entity forms.




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

Hi @TheIntern ,  You can go to portal studio > Themes > upload custom css > upload a new file called custom.css like below 

 

ragavanrajan_0-1613034123901.png

 

or you can go to portal management  > Content > Web files like below > Dont select any parent page.  So it will be applied to all web pages / forms 

 

 

 

1.  In my case bulma.min.css  

 

 

ragavanrajan_1-1613034179859.png

Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (30,715)