Layout, larger bar for resizing.

EasyUI Forum

September 15, 2025, 03:39:12 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Layout, larger bar for resizing.

Pages: [1]

« previous next »

Author

Topic: Layout, larger bar for resizing. (Read 10536 times)

doev

Newbie

Posts: 22

Layout, larger bar for resizing.

« 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


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Layout, larger bar for resizing.

« Reply #1 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>


	Logged

doev

Newbie

Posts: 22

Re: Layout, larger bar for resizing.

« Reply #2 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.


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Layout, larger bar for resizing.

« Reply #3 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>


	Logged

doev

Newbie

Posts: 22

Re: Layout, larger bar for resizing.

« Reply #4 on: July 15, 2014, 01:21:51 PM »

thank you.


	Logged

Pages: [1]

« previous next »