Print Page - creating help panel

Title: creating help panel
Post by: crosemffet on November 24, 2012, 05:23:31 AM

the page has 2 sections, the top section is newsPanel and the rest is mainPanel
the idea is create one help panel, that shows help instructions in fromt of the mainPanel, covering this panel with instructions, in case the user needs it. the help must be closed until user's request (made with one button in any part of the mainPanel).
my code is:
<div style="margin:10px 10px;">
<div id="newsPanel" class="easyui-panel" style="width:$(window).width()-100;height:40px;padding:10px 10px 10px 10px;"></div>
<div style="width:$(window).width()-100;height:10px"></div>
<div id="mainPanel" class="easyui-panel" title="Main Panel" style="width:$(window).width()-100;height:668px;padding:10px 10px 10px 10px;"></div>
<div id="helpPanel" class="easyui-panel" style="position:absolute;top:50px;bottom:10px;padding:10px;background:#FFFFFF;" data-options="title:'HELP',closable:true,closed:true"></div>
</div>
the problem is: everything goes fine, except the help panel always shows in the bottom of the page, after the mainPanel, not over the mainPanel.
so, what's wrong?
thanks in advance,

Title: Re: creating help panel
Post by: stworthy on November 25, 2012, 11:25:59 PM

To create a panel with absolute attribute, a style property must be applied to the outer panel object. Try the following code:

Code:

<div id="helpPanel" class="easyui-panel" style="padding:10px;background:#FFFFFF;" data-options="title:'HELP',closable:true,closed:true,
		style:{
			position:'absolute',
			left: 50,
			top: 50
		}"></div>

As an absolute panel, the width and height need to be set before display on screen.

Code:

$('#helpPanel').panel('open').panel('resize',{
	width:$(window).width()-100,
	height:$(window).height()-100
});

Title: Re: creating help panel
Post by: codeguyross on December 16, 2013, 04:09:22 PM

I was able to use this post to help me position a panel on the right side of the screen. Thanks for this answer stworthy!

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: crosemffet on November 24, 2012, 05:23:31 AM