Bootgrid refresh button not to size

Question

I'm using bootstrap and jquery bootgrid, and all was ok first. Then I started a new project and used bootgrid there. And I get a strange thing: on the grid's control panel, refresh button is smaller than others. But I didn't changed any configs in bootgrid, all are default.

enter image description here

Why it can be and how to fix it? This buttons are generated automatically and i have no ideas...

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

enter image description here

UPD2: code from the answer below doesn't work on my server. But it works fine on stack 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>

To help with answering the question, you might want to post your `html` and any relevant `javascript`, or at least a link to wherever you retrieved it from. — Adam Kewley, Apr 21 '15 at 08:08
when you create a form in bootstrap you can use a class named form-group which handels this problem .http://getbootstrap.com/components/ — Joh, Apr 21 '15 at 09:38
@Joh First, this element is generated automatically by bootgrid jquery plugin, so i can't change this. And on the other side - form-goup class IS generated for this buttons. — TEXHIK, Apr 28 '15 at 07:12
@TEXHIK, what size are the buttons on your server? Chrome devtools when you're inspecting the element has a section at the bottom under "styles" that shows the width, height, padding, border, and margin. I'm wondering what the height and padding are for the `button` elements. — redbmk, Apr 28 '15 at 16:34

score 0 · Answer 1 · answered Apr 21 '15 at 14:18

0

I'd make sure that you are pulling in the latest CSS libraries for your project

It appears to be working okay 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>

answered Apr 21 '15 at 14:18

KyleMit

30,350
66
462
664

It's strange, but the same problem even with imports, you suggested. – TEXHIK Apr 21 '15 at 14:35
1

Then, it *must* be the case that you're using some custom CSS somewhere that is changing the style. Try inspecting the element and seeing what rules apply to it that aren't coming from boostrap.css – KyleMit Apr 21 '15 at 14:37
There are only user-agent styles except of bootstrap and bootgrid. Attached screenshoot. – TEXHIK Apr 23 '15 at 13:15
In your browser, is it broken in the demo I created? If that's working and your code isn't, there must be something in your code that is not in your question. Which is very hard to debug remotely. Try copying and pasting my entire answer into your code and see if that works. If so, do a diff-merge between the two files and start changing line by line until the problem reproduces. – KyleMit Apr 23 '15 at 14:06
Your demo is working fine... in stack snippset. I copied all your code to a new empty file on my server and it is broken! I don't understand, what is going on here... And I'm using freemarker. – TEXHIK Apr 24 '15 at 10:24
Sounds like there is maybe some CSS on your server that is messing with the button sizes. Try taking out all CSS except for bootstrap and bootgrid. If you have a lot of CSS files on your page add them back in one at a time until it breaks to at least figure out which file it's coming from. Also the order they're added matters. – redbmk Apr 27 '15 at 15:45
@redbmk As of my last update, there are no other CSS, except of that is in the answer, I put the full code of page, there no more lines. But it works fine as a snippet, but doesn't work on my server. – TEXHIK Apr 28 '15 at 07:10
@TEXHIK could you post a link to the sample page on your server? – redbmk Apr 28 '15 at 07:25
@redbmk server is not available out of my local network. But i posted full code from chrome's page source window in last update. – TEXHIK Apr 28 '15 at 07:58

score 0 · Answer 2 · answered May 19 '17 at 09:33

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.

Change 1 : For Refresh button icon. Please replace the given code in "jquery.bootgrid.js"

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

Instead of

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

Change 2 : For Search icon. Please replace given code in "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 of

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

There is one more thing that you have to find drop down icon by your self. hope this works. — Manish Bhadani, May 19 '17 at 10:32

score 0 · Answer 3 · answered Apr 17 '18 at 04:39

0

Add this css to your code and hopefully it will fix the refresh button size.

<style>
    .glyphicon-refresh{line-height:1.42857;}
</style>

Regards,

answered Apr 17 '18 at 04:39

Mostafa Fouda

31
1
6

Bootgrid refresh button not to size

3 Answers3

Linked