2. PHPRunner General questions
  3. Popup Width
This topic is locked

Popup Width

 		8/1/2021 1:42:34 AM
PHPRunner General questions
M
 Mark Kramer author

All,

I have a Dashboard list data section that opens a popup window when clicked. The popup window opens but the width and heighth are just off enough to make the alignment of the data off. How and where would I change the popup heighth and width?
I tried the jscript api
popup.setWidth(500);
popup.setHeight(500);

in the onLoad event but did not see a change.

I thought maybe Before display event but it is PHP.....

Stumped and just need a direction....

Thank you and in advance.
woodey2002 8/1/2021

i found this posted in the forum a few years back...

this code placed on the JS onload event page seems to work for me.

it produces an syntax error when you check syntax in runner but it works in a built page...

//================================Start Popup Window Resize ==================================
function customPopupSizeController( pct_height = 90, pct_width = 70 , popup_object = pageObj){
//check if mobile device and if so exit function alltogether
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i))
{
return true;
}
if(popup_object.bsWin){
console.log('Yes, opened as a popup');

var widgetNodeMain = $( popup_object.bsWin[0].childNodes[0] );//MODAL MAIN (aka div with class "modal-dialog ui-draggable" )

var widgetNodeContent = $( widgetNodeMain[0].childNodes[0] );//MODAL CONTENT

var widgetNodeHeader = $( widgetNodeContent[0].childNodes[0] );//MODAL HEADER

var widgetNodeBody = $( widgetNodeContent[0].childNodes[1] );//MODAL BODY

var widgetNodeFooter = $( widgetNodeContent[0].childNodes[2] );//MODAL FOOTER

if (window.screen) {

w = window.innerWidth * pct_width / 110;
h = window.innerHeight * pct_height / 90;
//h = 800;
top_pos = (window.innerHeight - h ) / 2;//help us center this on screen
top_pos += 'px';

};

widget_height = h + 'px';
widget_width = w + 'px';

widget_body_height = ( h - widgetNodeHeader[0].clientHeight - widgetNodeFooter[0].clientHeight ) + 'px';

widgetNodeMain.css({'height': widget_height, 'width': widget_width, 'top': top_pos, 'margin-top': '0px'});//aka div with class " modal-dialog ui-draggable
widgetNodeContent.css({'height': widget_height, 'width': '100%'});//aka div with class "modal-content ui-resizable"
widgetNodeBody.css({'height':widget_body_height, 'width': '100%'}); //aka div with class "modal-body"

}else{
console.log('No, not opened in a popup');
}

}
//================================End Popup Window Resize ==================================;

customPopupSizeController( 65, 90 );//call this function passing in height and width as percentage
D
 		DealerModulesDevClub member 8/1/2021

Hi Mark,

The easy way to size pop ups is to select the size you need in phprunner.
(Sort of a hidden area, one of those sections I did not know was there unless I clicked on it.)

I understand that you are opening the link from a dashboard BUT go to the list page for the link that you are trying to size.

  1. Make sure you are on the list page, click the view button and you will have a new set of parameters to configure the popups.
  2. Just check the check box, "open in popup" and put in the size that you want the pop up to be.

A little hard to explain so I am putting a screen shot up too.

img alt

Hope this helps.
Paul
M
 		Mark Kramer author 8/7/2021

Paul,

I never saw that feature before..

Thank you for pointing that one out!