Skip to main content
Nintex Community Menu Bar
Question

How to edit the element.style attribute of a pop-up??

  • July 10, 2024
  • 6 replies
  • 23 views

Forum|alt.badge.img+8

How would I apply CSS to a specific popup? I’ve tried following other posts on the community, but have had no luck. Secondly, what is the best approach to editing the element.style attribute? I am trying to modify the “min-height” property of the popup below.

Any help is appreciated.



This topic has been closed for replies.

6 replies

Forum|alt.badge.img+6

Try this on for size…

When you configure the pop-up in the page builder, add a wrapper inside the popup. It looks like you have a button set inside your pop-up. Include your button set or any other component inside the wrapper like this:

Click on the wrapper component to edit the Style Attributes of the wrapper, like Size -> Min Height, and it will change the CSS properties of the popup.


Forum|alt.badge.img+8

That only seemed to curb the height of the button set component. The popup itself is still oddly large.


Forum|alt.badge.img+6

You’re right about that Josef…

Another option would be to target the class of the pop-up div (we used “ui-dialog-content”) and specify the min-height using !important:

Hope that helps.


Forum|alt.badge.img+8

That worked for the first pop-up but now the second pop up is displaying that ugly scroll bar. Is there anyway to target just a specific pop up and leave the rest alone?


Forum|alt.badge.img+8

This can be resolved. 

Resolution: https://community.skuid.com/t/css-reference-a-popup 

Create In-Line (Snippet)

var $ = skuid.$;skuid.$( ‘.ui-dialog-content’ );
skuid.$( ‘.ui-dialog-content’ ).last();
skuid.$( ‘.ui-dialog-content’ ).last().height( ‘160px’ );


Forum|alt.badge.img+6

Great find Josef!