2. PHPRunner Tips and Tricks
  3. Popup size window override and inside border removal
This topic is locked

Popup size window override and inside border removal

 		2/20/2015 1:18:20 PM
PHPRunner Tips and Tricks
F
 FunkDaddy author

I wish PHPR allowed us to simply declare the minimum dimensions of popup windows for add, edit, and view forms which is dynamically controlled by YUI.
Here is a simple hack on how to override the dynamic sizing of those windows:
In visual editos simply insert a PHP Snippet right after the "header" element on the page (no need to switch into HTML mode in visual editor, simply click after header and insert snippet). Then echo out a set of CSS rules to target the popup.
For example:



// Put your code here.

echo "<style>

/* popup width override */

.yui3-widget-modal{

min-width: 875px;

min-height: 650px;

}
/* inside border overrides */

.rnr-c-add{

border: none !important;

}

.rnr-c-fields{

border: none !important;

}

.rnr-brickcontents{

background: none !important;

}

</style>"


That's it... now window will open with those minimum dimensions and the inside border in the form will also be gone.
I have not cross-browser tested to determine whether the !important css rule gets picked up by all browsers, but it seems to work well in Chrome.
F
 		FunkDaddy author 2/1/2016

So here is a "better way" of resizing popup windows in phpr:
Simply add this code to you add/edit/view page int he JS OnLoad event area:



var widgetNode = $( this.win.get("boundingBox").getDOMNode() );//this targets the outter portion of popup window

var bodyNode = $( this.win.bodyNode.getDOMNode() ); //this targets the inner portion of popup window
//Now add whatever css you want to adjust the size.

//I'd recommend doing some calculations based on the browser window size to adjust dynamically instead of hardcoded values like below.

widgetNode.css({'height' : '850px', 'top': '50px' });

bodyNode.css('height', '750px');


Cheers,
F
 		FunkDaddy author 3/11/2016

Here is a improved version for managing how popups are displayed on page:



//================================Start Popup Window Resize ==================================

//Conditional is to prevent error log from firing when we open this page not via popup (ex: right click open new tab)

if(this.win){

console.log('Yes, opened as a popup');

var widgetNode = $( this.win.get("boundingBox").getDOMNode() );

var bodyNode = $( this.win.bodyNode.getDOMNode() );
if (window.screen) {
popup_screen_pct_width = 60; //percentage width of screen you want popup to be

popup_screen_pct_height = 65;//percentage height of screen you want popup to be
w = window.screen.availWidth * popup_screen_pct_width / 100;

h = window.screen.availHeight * popup_screen_pct_height / 100;
left_pos = (100 - popup_screen_pct_width ) / 2; //give us the left positioning percentage distance to use (to center popup horizontally)

top_pos = (100 - popup_screen_pct_height ) / 2; //give us the top positioning percentage distance to use (to center popup vertically)



left_pos += '%';

top_pos += '%';



};
widgetNode_height = h;

bodyNode_height = (h - 98);//adjust for footer controls in popup
widgetNode_width = w;

bodyNode_width = (w - 20);
widgetNode.css({'height':widgetNode_height, 'width':widgetNode_width, 'left': left_pos, 'top': top_pos});

bodyNode.css({'height':bodyNode_height, 'width': '100%'} );

}else{

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

}

//================================End Popup Window Resize ==================================
F
 		FunkDaddy author 5/17/2016

With new version of PHPR 9 (beta) this no longer seems to work because are a given a new win object object "bsWin". So here is the new version for this code to handle things in phpr bootstrap: http://www.asprunner.com/forums/topic/23853-bootstrap-add-edit-popup-window-resize/