Bootgrid кнопка обновления не для размера

Question

Я использую bootstrap и jquery bootgrid, и все было в порядке. Затем я начал новый проект и использовал bootgrid. И я получаю странную вещь: на панели управления сетки кнопка обновления меньше других. Но я не изменил никаких конфигураций в bootgrid, все по умолчанию.

Почему это может быть и как это исправить? Эти кнопки генерируются автоматически, и у меня нет никаких идей ...

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: стили из хрома инспектировать.

UPD2: код от ответа ниже не работает на моем сервере. Но он отлично работает на стеке snippset!

<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>

Answer 1

Я бы убедиться, что вы тянете в последних библиотек CSS для вашего проекта

• https://cdnjs.com/libraries/jquery
• https://cdnjs.com/libraries/twitter-bootstrap
• https://cdnjs.com/libraries/jquery-bootgrid

Это, кажется, работает нормально с кодом вы предоставили:

$(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>

Answer 2

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. 

Изменение 1: Для Обновить значок кнопки. Пожалуйста, замените данный код в "jquery.bootgrid.js"

actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\"><span class=\"icon glyphicon glyphicon-refresh\"></span></button>" 

Вместо

actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>" 

Изменить 2: Для значка поиска. Пожалуйста, замените данный код на "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>" 

Вместо

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>"