[SOLVED] easyui-panel lyout

[Coder]

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:


how can I do like this:

[stworthy]

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>

[Coder]

Thanx!

[worm6666]

I have played with this problem:



And have solved it this way:


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)

[worm6666]

Code:

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

it is enough also 1

Code:

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