Print Page - vertical separator in datagrid toolbar

Title: vertical separator in datagrid toolbar
Post by: crosemffet on January 24, 2014, 02:46:28 PM

hello
I need to ad vertical separator in datagrid toolbar;
I know horizontal separator is: <div class="menu-sep"></div>, but what is vertical separator equivalent...?
<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
| --> here I want vertical separator
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" disabled="true" onclick="destroyUser()">All</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="destroyUser()">Enabled</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="destroyUser()">Disabled</a>
| --> here I want vertical separator
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="destroyUser()"><?php echo $textows[40];?></a>
</div>

Title: Re: vertical separator in datagrid toolbar
Post by: stworthy on January 25, 2014, 05:33:20 PM

Please try this:

Code:

<style>
	.l-btn{
		vertical-align:middle;
	}
	.button-sep{
		display:inline-block;
		width:0;
		height:22px;
		border-left:1px solid #ccc;
		border-right:1px solid #fff;
		vertical-align:middle;
	}
</style>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
    <span class="button-sep"></span>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" disabled="true" onclick="destroyUser()">All</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="destroyUser()">Enabled</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="destroyUser()">Disabled</a>
    <span class="button-sep"></span>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="destroyUser()"><?php echo $textows[40];?></a>
</div>

Title: Re: vertical separator in datagrid toolbar
Post by: JeroenNL on December 26, 2014, 04:14:58 AM

Excellent example code: just what I was looking for. :)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: crosemffet on January 24, 2014, 02:46:28 PM