cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Position a Popup

SOLVED
Level 8

Position a Popup

Is there any way to position a popup so it is not center of the screen?

Tags (3)
1 ACCEPTED SOLUTION

Accepted Solutions

Re: Position a Popup

Hello,

 

I don't think you can specify the position by using the widget's functionality.

showPopup method is used in navigation widget and I don't see any parameters which are for specifying the position of the popup on the screen.

 

widgetReference.showPopup(mashupName, parameters, popupClosedCallback, parmValueChangedCallback, isModalPopup, popupTitle, fixedPopupWidth, fixedPopupHeight, modalPopupOpacity, false, dialogId, showClose, clickOutsideToClose);

 

 

If you use DevTools of your browser application and see Styles applied to Popup element, you can find left and top are applied to it at root_navigation-3-popup level. (the number, in this case 3, between navigation and popup changes depending on your Mashup design)

2019-03-13 10-09-44.jpg

 

ThingWorx has Custom CSS feature and you can reference Online Help to understand the usage.

When using Custom CSS, it's expected to give the widget a CustomClass id in the property and set it's style in Custom CSS tab. But when I was fiddling with it I found I can specify something like below and the style is applied to the Mashup.

#root_navigation-3-popup {
    left:40% !important
}

This may not be the designed way to use Custom CSS and this current behavior might be changed in a future release, but if you really need to specify the position of the popup, you can consider the risk and maybe give it a try.

 

2 REPLIES 2

Re: Position a Popup

Hello,

 

I don't think you can specify the position by using the widget's functionality.

showPopup method is used in navigation widget and I don't see any parameters which are for specifying the position of the popup on the screen.

 

widgetReference.showPopup(mashupName, parameters, popupClosedCallback, parmValueChangedCallback, isModalPopup, popupTitle, fixedPopupWidth, fixedPopupHeight, modalPopupOpacity, false, dialogId, showClose, clickOutsideToClose);

 

 

If you use DevTools of your browser application and see Styles applied to Popup element, you can find left and top are applied to it at root_navigation-3-popup level. (the number, in this case 3, between navigation and popup changes depending on your Mashup design)

2019-03-13 10-09-44.jpg

 

ThingWorx has Custom CSS feature and you can reference Online Help to understand the usage.

When using Custom CSS, it's expected to give the widget a CustomClass id in the property and set it's style in Custom CSS tab. But when I was fiddling with it I found I can specify something like below and the style is applied to the Mashup.

#root_navigation-3-popup {
    left:40% !important
}

This may not be the designed way to use Custom CSS and this current behavior might be changed in a future release, but if you really need to specify the position of the popup, you can consider the risk and maybe give it a try.

 

Highlighted

Re: Position a Popup

Hi,

 

Thanks for confirming my thoughts. It would be nice to have parameters to set for the position of the popup via the widget itself. I tested your CSS method and was successful.