Bootgrid refresh button independent of size
I am using bootstrap and jquery bootgrid and everything was fine. Then I started a new project and used bootgrid. And I get a weird thing: On the grid control panel, the refresh button is smaller than the others. But I haven't changed any configurations in bootgrid, everything is default.
Why might this be and how to fix it? These buttons are generated automatically and I have no idea ...
UPD
JS:
$(function () {
var autoOutGrig = $("#autoOutGrig").bootgrid({
navigation: 3,
ajax: true,
url: "controllers/getListFiles",
post: function () {
return {
type: 'req',
expanded: $('#exp').text()
};
},
responseHandler: function (response)
{
return response.data;
}
});
HTML:
<div id="autoOut" class="tab-pane fade in active">
<span id="exp" style="display: none;"></span>
<h3>Auto OUT</h3>
<table id="autoOutGrig" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="date" class="col-md-3">/</th>
<th data-column-id="expander" data-formatter="expander" class="col-md-1"></th>
<th data-column-id="file" class="col-md-4"> </th>
<th data-column-id="uid" class="col-md-4">UID</th>
<th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
<!-- <th data-column-id="respType" class="col-md-2"> </th>
<th data-column-id="respName" class="col-md-2"> </th>-->
</tr>
</thead>
</table>
</div>
UPD: styles from chrome check.
UPD2: The code from the below answer doesn't work on my server. But it works fine on the snippset stack!
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>
<script>
$(function () {
var testGrid = $("#testGrid").bootgrid({
navigation: 3,
ajax: true,
url: "controllers/getListFiles",
post: function () {
return {
type: 'req',
expanded: $('#exp').text()
};
},
responseHandler: function (response)
{
return response.data;
}
});
});
</script>
<div id="autoOut" class="tab-pane fade in active">
<span id="exp" style="display: none;"></span>
<h3>Auto OUT</h3>
<table id="testGrid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="date" class="col-md-3">/</th>
<th data-column-id="expander" data-formatter="expander" class="col-md-1"></th>
<th data-column-id="file" class="col-md-4"> </th>
<th data-column-id="uid" class="col-md-4">UID</th>
<th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
</tr>
</thead>
</table>
</div>
+1
source to share
3 answers
I would make sure you are pulling in the latest CSS libraries for your project
- https://cdnjs.com/libraries/jquery
- https://cdnjs.com/libraries/twitter-bootstrap
- https://cdnjs.com/libraries/jquery-bootgrid
Everything seems to work with the code you provided:
$(function () {
var autoOutGrig = $("#autoOutGrig").bootgrid({
navigation: 3,
ajax: true,
url: "controllers/getListFiles",
post: function () {
return {
type: 'req',
expanded: $('#exp').text()
};
},
responseHandler: function (response)
{
return response.data;
}
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>
<div id="autoOut" class="tab-pane fade in active">
<span id="exp" style="display: none;"></span>
<h3>Auto OUT</h3>
<table id="autoOutGrig" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="date" class="col-md-3">/</th>
<th data-column-id="expander" data-formatter="expander" class="col-md-1"></th>
<th data-column-id="file" class="col-md-4"> </th>
<th data-column-id="uid" class="col-md-4">UID</th>
<th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
</tr>
</thead>
</table>
</div>
0
source to share
There are problems with class name. You have to change class names in "jquery.bootgrid.js" file. So, You can get refresh, search and menu drop down icon.
Edit 1: Refresh button icon. Please replace this code with "jquery.bootgrid.js"
actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\"><span class=\"icon glyphicon glyphicon-refresh\"></span></button>"
Instead
actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>"
Edit 2: search icon. Please replace this code with "jquery.bootgrid.js"
search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"icon glyphicon input-group-addon glyphicon-search\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>"
Instead
search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"{{css.icon}} input-group-addon {{css.iconSearch}}\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>"
0
source to share