Title in collapsed Layout Panel

[skellenb]

Hi,

Is there a way to set/show the Title in a collapsed Layout Panel?

When collapsed east or west panel the Title should be visible rotated 90 degrees like in ExtJS
In north, south and Center Panel the Title should be visible like when its expanden...

[stworthy]

This feature is not available in current version. The code below shows a simple way to display the rotated title when the west panel is collapsed.

Code:

$(function(){
	var p = $('body').layout('panel','west').panel({
		onCollapse:function(){
			var title = $('body').layout('panel','west').panel('options').title;  // get the west panel title
			var p = $('body').data('layout').panels['expandWest'];  // the west expand panel
			p.html('<div style="-moz-transform: rotate(90deg);padding:6px 2px">'+title+'</div>');
		}
	});
});

[skellenb]

many thanks for the Help

can i do something like this to show the title in collapsed east panel (closed at init with collapsed=true)??

Code:

$.parser.onComplete = function(){
	$('body').css('visibility','visible');
	var title = $('#mainlayout').layout('panel','east').panel('options').title;  // get the east panel title
	var p = $('#mainlayout').data('layout').panels['expandEast'];  // the east expand panel
	p.html('<div style="-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);padding:6px 2px;font-weight:bold;">'+title+'</div>');
};

[Pierre]

This feature is not available in current version. The code below shows a simple way to display the rotated title when the west panel is collapsed.

Code:

$(function(){
	var p = $('body').layout('panel','west').panel({
		onCollapse:function(){
			var title = $('body').layout('panel','west').panel('options').title;  // get the west panel title
			var p = $('body').data('layout').panels['expandWest'];  // the west expand panel
			p.html('<div style="-moz-transform: rotate(90deg);padding:6px 2px">'+title+'</div>');
		}
	});
});

Hello
this code does not work for me. I'm using 1.3.5
Is there any other way to see collapsed panel Title?
Thanks.

[Pierre]

Hello Stworthy
do you (or anybody else) have some small working example of this?
Thanks!

[mzeddd]

would be good to have it as option so users can simply enamble/disable with title on collapsed layout and do not put extra code.

[Pierre]

mzeddd
do you have working example of using this?
thank you

[mzeddd]

Example from stworthy works fine in Firefox for me

But for Opera and other browsers it should be updated with another CSS transform parameters like in example from skellenb

So, if we put extra CSS parameters from skellenb's example to stworthy's example we get it working

Code:

<script>
$(function(){
	var p = $('body').layout('panel','west').panel({
		onCollapse:function(){
			var title = $('body').layout('panel','west').panel('options').title;  // get the west panel title
			var p = $('body').data('layout').panels['expandWest'];  // the west expand panel
			p.html('<div style="-moz-transform: rotate(90deg);padding:6px 2px;-ms-transform: rotate(90deg);-webkit-transform: rotate(90deg)">'+title+'</div>');
		}
	});
});	
</script>

[Pierre]

It works, thank you very much.

[srg]

I think this may help you.........

<div class="easyui-panel" id="" title="TITLE" data-options="collapsible:true,cls:'panelTopLevel'"></div>