Print Page - [SOLVED] easyui-panel lyout

Title: [SOLVED] easyui-panel lyout
Post by: Coder on August 22, 2019, 01:14:15 PM

Code:

<div id="space"> 
	<div class="easyui-panel"
		  id="divA" title="DivA" 
		  data-options="iconCls:'icon-ui-wrench'
				, fit:false
				"
	>
	   	<button class="easyui-linkbutton" form="main_form" name="action" type="submit" 
				data-options="iconCls:'icon-large-smartart'
						, plain: 'true'
						, size:'large'
						, iconAlign:'top'
						"
			value="btnA1">A1</button>
		<div class="btn-sep"></div>
		<button class="easyui-linkbutton" form="main_form" name="action" type="submit"
				data-options="iconCls:'icon-reload'
						, plain: 'true'
						, size:'large'
						, iconAlign:'top'
						"
			value="btnA2">A2</button>
	</div>
	<div class="easyui-panel"
		id="divB" title="DivB" 
		data-options="iconCls:'icon-ui-key'
				, fit:false
				"
	>
 		<button class="easyui-linkbutton" form="main_form" name="action" type="submit"
				data-options="iconCls:'icon-man'
						, plain: 'true'
						, size:'large'
						, iconAlign:'top'
						"
			value="btnB1">B1</button>
	</div>
	<div class="easyui-panel"
		id="divC" title="DivC"
		data-options="iconCls:'icon-ui-bookmark'
				, fit:false
				"
	>
		<button class="easyui-linkbutton" form="main_form" name="action" type="submit"
					data-options="iconCls:'icon-ui-tag'
							, plain: 'true'
							, size:'large'
							, iconAlign:'top'
						"
			value="btnC1">C1</button>
		<button class="easyui-linkbutton" form="main_form" name="action" type="submit"
					data-options="iconCls:'icon-ui-tag'
							, plain: 'true'
							, size:'large'
							, iconAlign:'top'
							"
			value="btnC2">C2</button>
		<button class="easyui-linkbutton" form="main_form" name="action" type="submit"
					data-options="iconCls:'icon-ui-tag'
							, plain: 'true'
							, size:'large'
							, iconAlign:'top'
							"
			value="btnC3">C3</button>
	</div>
</div>

result:
(https://www.jeasyui.com/forum/index.php?action=dlattach;topic=8072.0;attach=1971;image)

how can I do like this:
(https://www.jeasyui.com/forum/index.php?action=dlattach;topic=8072.0;attach=1973;image)

Title: Re: easyui-panel lyout
Post by: stworthy on August 22, 2019, 07:01:39 PM

1. Define a CSS class 'p-float'.

Code:

<style type="text/css">
    .p-float{
        float: left;
        margin-right: 10px;
    }
    .p-float .panel-body{
        display: flex;
        flex-direction:row;
    }
</style>

2. Assign it to all your panel with 'cls' property set to 'p-float'.

Code:

<div class="easyui-panel"
      id="divA" title="DivA" 
      data-options="iconCls:'icon-ui-wrench'
            , fit:false,cls:'p-float'
            "
>
  ...
</div>

Title: Re: easyui-panel lyout
Post by: Coder on August 22, 2019, 07:52:50 PM

Thanx!

Title: Re: [SOLVED] easyui-panel lyout
Post by: worm6666 on August 24, 2019, 11:29:06 PM

I have played with this problem:

(https://i.imgur.com/QlNW3HS.jpg)

And have solved it this way:
(https://i.imgur.com/dwXc9pN.jpg)

section 1 & 3 are DIVs with buttons
section 2 is blank DIV

be care about the GROW value
1: 1
2: 20
3: 0 <- this is important - if you give there 1 (or more) ou will have button with right blank margin that canNOT be handled later with margin-right: 0px

Code:

<!-- buttons for CRUD table -->
<div id="toolbar" style="display: flex">
	<div style="flex-grow: 1">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newItem()">New Item</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editItem()">Edit Item</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyItem()">Remove Item</a>
	</div>
	<div style="flex-grow: 20">
	</div>
	<div style="flex-grow: 0">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="tableReload()">Reload Table</a>
	</div>
</div>

REM: DIV id="toolbar" - has style="display: flex" - also all his childrens have this also (not need to define style section in css)

Title: Re: [SOLVED] easyui-panel lyout
Post by: worm6666 on August 25, 2019, 12:26:27 AM

Code:

<div style="flex-grow: 20">

it is enough also 1

Code:

<div style="flex-grow: 1">

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Coder on August 22, 2019, 01:14:15 PM