Popup - possible to control vertical positioning?

  • 3
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
I have a popup configured with a page include and nothing else. When the popup loads, it is centered vertically. However, when the page include content loads, it is a bit long and gets pushed off the bottom of the page. This means the user needs to scroll and/or manually reposition the popup.

Is there any way to set the initial top value of a popup?

Thanks
Photo of Chris Hodgen

Chris Hodgen

  • 202 Points 100 badge 2x thumb

Posted 5 years ago

  • 3
Photo of Chris Hodgen

Chris Hodgen

  • 202 Points 100 badge 2x thumb
I'm going to bump this and add - I could also settle for some sort of post-load reposition. I've been fiddling but can't work it out. No one else has encountered this issue?
Photo of J.

J., Official Rep

  • 7,690 Points 5k badge 2x thumb
Chris,

We don't have a way to specify that property on a PopUp out of the box in Skuid at present. One thing that you could do is to include a Custom Component in the PopUp body which goes and finds its parent and sets the value of top to something smaller. On the Resources tab, add a new Javascript resource of type In-Line (Component). The body of that component could be something like this:
var element = arguments[0],
   $ = skuid.$;

$(document.body).one('pageload',function() {
    element.parents('.ui-dialog').css({'top' : '20px'});
});
Does that help?
Photo of Jarrod Hinson

Jarrod Hinson

  • 60 Points
I made this as a JS Resource on my page (that is included and called within a Modal) and it isn't doing anything. Is there something else I have to do or just create the JS Resource as Inline (Component)?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
I made this as a JS Resource on my page (that is included and called within a Modal) and it isn't doing anything. Is there something else I have to do or just create the JS Resource as Inline (Component)?
Photo of J.

J., Official Rep

  • 7,690 Points 5k badge 2x thumb
Storing the code in a resource versus inline shouldn't matter. If you store it in a resource, you'll have to wrap it with the following (substituting the "MyComponentName" part, of course) though:
skuid.componentType.register('MyComponentName',function(element) { 
var $ = skuid.$;

$(document.body).one('pageload',function() {
element.parents('.ui-dialog').css({'top' : '20px'});
});
});
The other thing that comes to mind is this only works if the contents of the popup is a page include. Is that still the case, and if not, is there another component that you are dynamically loading within that popup?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
I have a button that has a pop up and then inside that popup I am loading a page include which stretchs out the popup height but the top of the popup is near the screen center and I would like it at the top.
Photo of J.

J., Official Rep

  • 7,690 Points 5k badge 2x thumb
Well, it looks like you actually need to use the jQuery UI Position API now rather than straight CSS. When I set JavaScript breakpoints and step through it, the dialog does move, but then moves right back to center. The equivalent would be...
element.parents('.ui-dialog-content').dialog('option','position',{ my : 'top', at : 'top+20', of : window});
Thanks for finding this! Does this get it working for you?
Photo of Chris Hodgen

Chris Hodgen

  • 202 Points 100 badge 2x thumb
Awesome, this is exactly what I was thinking of. Thanks!