Print Page - Layout, larger bar for resizing.

Title: Layout, larger bar for resizing.
Post by: doev on July 13, 2014, 04:42:49 AM

Hello,

I tested some examples on touchscreen devices. Many things are hard to control. For example the basic layout demo: http://www.jeasyui.com/demo/main/index.php?plugin=Layout&theme=default&dir=ltr&pitem=

Is it possible to use a larger bar for changing the panel sizes?

greetings

Title: Re: Layout, larger bar for resizing.
Post by: stworthy on July 13, 2014, 08:00:08 AM

Do you wish to change the size of title bar? If so please change the '.panel-title' style.

Code:

<style type="text/css">
.panel-title{
  height:24px;
  line-height:24px;
}
</style>

Title: Re: Layout, larger bar for resizing.
Post by: doev on July 15, 2014, 12:20:48 AM

No, I want to increase the space where I can grab the border to resize the layout. Default is only 4-5px. You can increase it visual with this:

Code:

<style type="text/css">
  .layout-split-proxy-h { width: 24px; }
  .layout-split-proxy-v { height: 24px; }
</style>

But it is only visual and gives no better control on touchscreens.

Title: Re: Layout, larger bar for resizing.
Post by: stworthy on July 15, 2014, 12:57:14 AM

Ok, you would like to increase the splitting size for the region panel. To achieve this effect, the style code below should be overridden.

Code:

<style>
	.layout-split-north{ border-bottom-width:24px;}
	.layout-split-south{ border-top-width:24px;}
	.layout-split-west{ border-right-width:24px;}
	.layout-split-east{ border-left-width:24px;}
	.layout-split-proxy-h { width: 24px; }
	.layout-split-proxy-v { height: 24px; }
</style>

Make sure that the 'edge' property must be set to the corresponding size you want to grab it.

Code:

<body class="easyui-layout">
	<div title="west" data-options="region:'west',split:true,edge:24" style="width:180px"></div>
	<div data-options="region:'center'"></div>
</body>

Title: Re: Layout, larger bar for resizing.
Post by: doev on July 15, 2014, 01:21:51 PM

thank you.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: doev on July 13, 2014, 04:42:49 AM