Portal Alignment

[Darrel]

Hello,

I needed some help using the portal extension. I've seen the code for using by referring the following link: http://www.jeasyui.com/extension/portal.php
This is the following code for creating a normal portal applciation:

Code:

<div id="pp" style="width:800px;height:500px;">
    <div style="width:33%"></div>
    <div style="width:33%"></div>
    <div style="width:33%"></div>
</div>

My requirement is such that there will be one element in any of the above three div elements, which will have the width equivalent to the size of "pp" div (main portal div). So when i move that element with width of 100%, i would like it to retain it's 100% as per "pp" div and not the child divs of "pp" in which it is dragged and dropped.

eg:

Code:

<div id="pp" style="width:800px;height:500px;">
	<div style="width:33%">
		<div title="Searching" iconCls="icon-search" closable="true" style="height:80px;padding:10px;">
			<input class="easyui-searchbox">
		</div>
	</div>
	<div style="width:33%">
		<!-- Assume i want the following div element to scaled as per the width of the div with id "pp" -->
		<div title="Searching" iconCls="icon-search" closable="true" style="height:80px;padding:10px;">
			<input class="easyui-searchbox">
		</div>
	</div>
	<div style="width:33%">
		<div title="Searching" iconCls="icon-search" closable="true" style="height:80px;padding:10px;">
			<input class="easyui-searchbox">
		</div>
	</div>
</div>

Is it possible to have such an element in the portal grid. If so, how could i accomplish the same?

Thanks in advance.

[jarry]

You can try to set some CSS styles for the special panel when drag and drop it successfully. Please refer to the code below:

Code:

$('#pp').css('position','relative').portal({
	onStateChange: function(panel){
		if (panel.attr('id') == 'p2'){
			panel.panel('panel').css({
				position: 'absolute',
				zIndex: 99
			});
			panel.panel('move', {left:0,top:0});
			panel.panel('resize', {
				width: $('#pp').width()
			});
			$('#pp').css({
				paddingTop: panel.panel('panel').outerHeight()
			})
		}
	}
});