EasyUI Forum
October 03, 2022, 04:51:42 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: [SOLVED] datagrid toolbar buttons alignment  (Read 10565 times)
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« on: November 19, 2014, 05:30:36 AM »

I have a datagrid with toolbar buttons inside a window, and want to get my buttons left and right aligned inside the toolbar

Based on your example code, I wrote thist test page:

Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.1/demo/demo.css">
<script type="text/javascript" src="../lib/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body>

<div id="myWindow" class="easyui-window" style="width: 600px; height: 200px" data-options="resizable:true">

<!-- BOTONES DE ACEPTAR / CANCELAR DEL CUADRO DE DIALOGO -->
<div id="buttons">
<span style="float:left;padding:5px">
<a id="cancelBtn" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-cancel'" onclick="alert('Cancel')">Cancel</a>
</span>
<span style="float:right;padding:5px">
<a id="doneBtn" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-ok'" onclick="$('#myWindow').window('close')">Done</a>
</span>
</div>

<table id="dg" class="easyui-datagrid"
data-options="singleSelect:false,
url:'../lib/jquery-easyui-1.4.1/demo/layout/datagrid_data1.json',
method:'get',
toolbar:'#buttons',
fit:true">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:150">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>

</div>

</body>
</html>

As you can see last rows of datagrid get's out of window, and cannot see them when scrolling datagrid
If I remove buttons toolbar, or remove left-right buttons alignment issues, last rows appears as expected
So, What am i doing wrong?

Thanks in advance
Juan Antonio
« Last Edit: November 19, 2014, 10:24:06 AM by Juan Antonio Martínez » Logged
Juan Antonio Martínez
Jr. Member
**
Posts: 68



View Profile
« Reply #1 on: November 19, 2014, 06:29:54 AM »

Solved: just use:

Code:
<div id="buttons" style="width:100%;display:inline-block">
<span style="float:left;padding:5px">
<a id="cancelBtn" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-cancel'" onclick="alert('Cancel')">Cancel</a>
</span>
<span style="float:right;padding:5px">
<a id="doneBtn" href="#" class="easyui-linkbutton"
data-options="iconCls:'icon-ok'" onclick="$('#myWindow').window('close')">Done</a>
</span>
</div>

That is: add style="width:100%;display:inline-block" to button's <div> declaration
« Last Edit: November 19, 2014, 10:23:45 AM by Juan Antonio Martínez » Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!