Bootsrap 4 and bootgrid

giulianimax commented 6 years ago

I'm using bootstrap 4 and bootgrid and, more or less, all seems be good except the button for the pagination that is showed as: «<12>» without button style formatting (but if I click on it works) I've tried moving the css ans js without any result. At the moment the including files are in this sequence:

<link href="../css/bootstrap-4.0.css" rel="stylesheet">                                         <!-- Bootstrap 4 core CSS -->
<link href="../css/dashboard.css" rel="stylesheet">                                             <!-- Custom styles for this template -->
<link href="../css/bootstrap-glyphicons.css" rel="stylesheet">                                  <!-- Glyphicons -->
<link href="../css/bootstrap-select.css" rel="stylesheet">                                      <!-- Bootstrap Select v1.5.0 -->

<link href="../css/google-fonts.css" rel="stylesheet">                                          <!-- Google fonts -->
<link href="../fonts/iconfont/material-icons.css" rel="stylesheet">                             <!-- Google material-icons -->
<link href="../css/jquery.bootgrid.min.css" rel="stylesheet" />                                 <!-- Bootgrid 1.3.1-->

 <script src="../js/jquery-3.3.1.js"></script>                                                   <!-- Jquery 3.3.1  -->
 <script src="../js/jquery.bootgrid.js"></script>                                                <!-- Bootgrid 1.3.1 -->
 <script src="../js/popper.min.js"></script>                                                     <!-- Popper core -->
 <script src="../js/bootstrap.min-4.0.js"></script>                                              <!-- Bootstarp 4  -->
 <script src="../js/dropdown.js"></script>                                                       <!-- Bootstarp 4 DropDown  -->
 <script src="../js/bootstrap-select.js"></script>                                               <!-- Bootstarp 4  Select v1.5.0 -->

<script src="../fonts/feather-icons/feather.js"></script>                                        <!-- Icons -->

firstep commented 6 years ago

hi, you have to overwrite the style of 'paginationButton' and the template of 'paginationItem' ...e.g.

;(function ($, window, undefined)
{
    "use strict";

    $.extend($.fn.bootgrid.Constructor.defaults.css, {
        iconRefresh: "refresh-cw",
        iconColumns: "list",
        iconSearch: "search",
        iconDown: "chevron-down",
        iconUp: "chevron-up",
        dropDownMenuItems: "dropdown-menu dropdown-menu-right",
        paginationButton: "page-link",
    });

    $.extend($.fn.bootgrid.Constructor.defaults.templates, {
        icon: "<span data-feather=\"{{ctx.iconCss}}\"></span>",
        paginationItem: "<li class=\"paginate_button page-item {{ctx.css}}\"><a data-page=\"{{ctx.page}}\" class=\"{{css.paginationButton}}\">{{ctx.text}}</a></li>"
    });
})(jQuery, window);

wesselvannierop commented 5 years ago

Can somebody provide an easy solution for bootgrid to work properly with bootstrap 4?

jaimestuardo commented 5 years ago

No answer yet? I am facing the same problem. I am using bootstrap 4, so I cannot use this grid.

giulianimax commented 5 years ago

I tried to use different way, the following is the last, without any result (inside a php file):

', icon: '', paginationItem: '

' } }); }

MenaceSan commented 5 years ago

Its quick and dirty fix. but this is what works for me:

function Bootgrid_Temp() {
    // Fix for BS4, https://github.com/rstaib/jquery-bootgrid/issues/403
    return {
        // pagination: '{{ctx.text}}'
        // paginationButton: "btn-info btn-sm",
        paginationItem: "<li class=\"page-item {{ctx.css}}\"><a data-page=\"{{ctx.page}}\" class=\"page-link btn-info btn-sm {{css.paginationButton}}\">{{ctx.text}}</a></li>"
    };
}

Then just use: templates: Bootgrid_Temp() when you create a bootgrid.

I also had problems with the Search Icon and outlines around the control buttons. I did :


@* fix broken styles for BS4 *@
<style>
    .bootgrid-header .search span {
        border-collapse: separate;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: table-cell;
        border-right: 0;
        background-color: #eee;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        padding: 6px 12px;
        text-align: center;
        font-size: 18px;
    }
</style>

But I'm sure there is a better way.

kahanu commented 5 years ago

For the pagination issue, I just added the following CSS to my site CSS file:


ul.pagination > li:first-child > a, 
ul.pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

ul.pagination > li > a {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #a3e844;
}

ul.pagination > li:last-child > a, 
ul.pagination > li:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    background-color: #709f2f;
    border-color: #a3e844;
    cursor: default;
}

.pagination > li > a:hover, 
.pagination > li > span:hover, 
.pagination > li > a:focus, 
.pagination > li > span:focus {
    color: #2a6496;
    background-color: #a6da60;
    border-color: #ddd;
}

Just change the colors to match your site theme.

ahunter52 commented 5 years ago

I think the easiest solution is to modify the javascript file for FontAwsome, jquery.bootgrid.fa.js and include it in your page after the normal bootgrid js include. My version of the modified fa.js looks like this.

jquery.bootgrid.fa.js.txt

rstaib / jquery-bootgrid

Bootsrap 4 and bootgrid #403