Print Page - Window size

I'm using a window as a modal dialog box, defined like so:

Code:

<div id="selectOrder" class="easyui-window" title="Get Order" data-options="modal:true,closed:true,left:160,top:170,minimizable:false,maximizable:false,collapsible:false" style="padding:10px;">
	<div id="orders" style="white-space:nowrap;"></div>
	<a id="cancelOrders" href="javascript:void(0)" class="b_lnk" style="float:right;">Cancel</a>
</div>

Some javascript populates the the "orders" div. When I call the window.open() method, the dialog appears with a width only as wide as the "cancelOrders" button. The wider content in the "orders" div is truncated on the right. Is there a way to "reset" the width after populating the div with content so it sizes automatically? Using size:auto doesn't work in the "selectOrder" div's options. I tried using jQuery's .css() method to set the width of the "selectOrder" div to auto after populating the "orders" div. The "selectOrders" div then sized correctly, but the close button at the top right didn't move over to the far right, and the inner border didn't render correctly.

I guess in short I'm asking how to automatically (no pixel dimensions) set the width of a window after populating it with data from an ajax call?

Try the code below to auto adjust the width according to its contents.

Code:

var w = $('#selectOrder');
w.window('header').css('width','');
w.window('body').css('width','');
w.window('resize',{width:'auto',height:'auto'});

EasyUI Forum

General Category => General Discussion => Topic started by: nwguy on November 12, 2013, 06:39:04 PM