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

  • 2
  • Question
  • Updated 2 years ago
  • Answered
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. 



Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb

Posted 2 years ago

  • 2
Photo of Khamla Phimmachack

Khamla Phimmachack, Official Rep

  • 1,536 Points 1k badge 2x thumb
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.
Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
That only seemed to curb the height of the button set component. The popup itself is still oddly large.
 
(Edited)
Photo of Khamla Phimmachack

Khamla Phimmachack, Official Rep

  • 1,536 Points 1k badge 2x thumb
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.
Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
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? 

Photo of Josef Lagorio

Josef Lagorio

  • 2,852 Points 2k badge 2x thumb
This can be resolved. 

Resolution: https://community.skuid.com/skuid/topics/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' );
Photo of Khamla Phimmachack

Khamla Phimmachack, Official Rep

  • 1,536 Points 1k badge 2x thumb
Great find Josef!