header panel in Layout

[mzeddd]

How can I make toolbar in layout to look like in dialog?

I mean I don't want to have buttons on top-right in "blue" area/header. I would like to have fixed "grey" panel below "blue" header.

Thanks,
/V

[stworthy]

You can put a dialog inside the region panel.

Code:

<div class="easyui-layout" style="width:700px;height:350px;">
	<div style="position:relative;width:300px" data-options="
			title:'west',
			region:'west',
			split:true
			">
		<div class="easyui-dialog" data-options="
				inline:true,
				fit:true,
				shadow:false,
				noheader:true,
				border:false,
				toolbar:[{
					text:'Add'
				},{
					text:'Edit'
				}]
				">
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
			<p>content</p>
		</div>
	</div>
	<div data-options="region:'center'">
	</div>
</div>

[mzeddd]

It works but not completly correct.

1) Title of the layout panel should not be closed by Dialog. In this setup I do not see "collapse" button for my "east" panel.

2) There is a gap between dialog and bottom of "east" panel of the same size as title bar or "east" panel.

Code:

<div class="easyui-layout"  style="height:240px">
	<div data-options="region:'center'" title="">test</div>
	<div data-options="region:'east',title:'Editor',split:true,collapsed:false" style="width:200px">
		<div class="easyui-dialog" data-options="inline:true,fit:true,shadow:false,noheader:true,border:false,
					toolbar:[{text:'Add'},{text:'Edit'}]">

			<form id="form">
				<p><b>test:</b>
				<input id="test" name="tcName" class="easyui-textbox" style="width:100%" disabled>
        <p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p>
        <p>test</p><p>test</p><p>test</p><p>test</p>
			</form>
		</div>
	</div>
</div>

[stworthy]

Please be careful to add 'position:relative' style to the east panel.

Code:

<div data-options="region:'east',title:'Editor',split:true,collapsed:false" style="width:200px;position:relative">
...
</div>

For more information please refer to http://jsfiddle.net/k0o6afhL/1/

[mzeddd]

Yes, got it.

Initially I put it into "data-options" section by mistake what gave me strange result and I removed it.

Now it looks as expected.

Thanks

[mzeddd]

Hi,

One comment to http://jsfiddle.net/k0o6afhL/1/ example:

If I set collapsed:true parameter for east panel and run this example then when I open east panel I see that toolbar is located not on top of the panel.

Can you check this?

Thanks,
//V

[stworthy]

The updated example below works fine.
http://jsfiddle.net/k0o6afhL/2/

[mzeddd]

Thanks stworthy!

I have one more question to this example.

There is a input element in panel. I'm going to have a number of input elements but part of them should be hidden for a while.

So, I put

Code:

<style>
    .hiddenElement {display:none}
</style>
<p class="hiddenElement"><b>test:</b>
<input id="test" name="tcName" class="easyui-textbox" style="width:100%" disabled></p>
<script>
function displayItemsByClassName(className,value){
	var items = document.getElementsByClassName(className);
	for (var i=0; i<items.length; i++) items[i].style.display = value;
}
</script>

Using displayItemsByClassName('hiddenElement','inline'); function call I show hidden elements but all of them do not look like if they were not hidden at the beginning. Input width is not 100% and behaves really strange when I resize 'east' panel.

Can you advice what should be done in order to get it fixed?