Popup - possible to control vertical positioning?

Questions
,
1

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

2

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?

3

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?

4

Awesome, this is exactly what I was thinking of. Thanks!

5

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)?

6

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)?

7

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?

8

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.

9

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?