|
Title: [SOLVED] datagrid toolbar buttons alignment Post by: Juan Antonio Martínez 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 Title: Re: datagrid toolbar buttons alignment Post by: Juan Antonio Martínez 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 |