StartBootstrap / startbootstrap-sb-admin-2

A free, open source, Bootstrap admin theme created by Start Bootstrap
https://startbootstrap.com/themes/sb-admin-2/
MIT License
9.76k stars 5.72k forks source link

Trouble with SF5 / bootstrap 4 - no bootstap styles are applied into datatables dom #394

Closed StephanieDefresnes closed 3 years ago

StephanieDefresnes commented 3 years ago

Hi, i haved installed startbootstrap-sb-admin-2 with npm and generated js & css with webpack encore, and datatables fields class are emty, structure dom is not like demo i have to config dom..

so i tried with gulp to, installing all dependencies, but problem still exists

i have already use datatables in other contexts, i've never had this problem

this is my datatables sb admin 2 config: back_app.js :

// css
import '../scss/back_app.scss';

// js
const $ = require('jquery');
global.$ = global.jQuery = $;
require('startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.bundle.min.js');
require('startbootstrap-sb-admin-2/vendor/jquery-easing/jquery.easing.min.js');
require('startbootstrap-sb-admin-2/js/sb-admin-2.min.js');

back_app.scss :

// font awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';

// SB Admin 2
@import '~startbootstrap-sb-admin-2/scss/sb-admin-2';
@import '~startbootstrap-sb-admin-2/vendor/bootstrap/scss/bootstrap';
...

user_search_app.js :

// css
import '../scss/user_search_app.scss';

// js
require('startbootstrap-sb-admin-2/vendor/datatables/jquery.dataTables.min.js');
require('startbootstrap-sb-admin-2/vendor/datatables/dataTables.bootstrap4.min.js');

$(document).ready(function(){
    var table = $('#dataTable').DataTable({
        language: {
            url: '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/'
                    + langs[$('html').attr('lang')] +'.json',
        },
        dom: '<"row"<"col-sm-6"l><"col-sm-6"f>>'
                +'<"table-responsive border"t>'
                +'<"row"<"col-sm-6"i><"col-sm-6"p>>',
        order: [],
        "columnDefs": [{
            orderable: false,
            targets: [0,8]
        }]
    })
})

user_search_app.css :

// Datatables
@import '~startbootstrap-sb-admin-2/vendor/datatables/dataTables.bootstrap4.css';
@import '~startbootstrap-sb-admin-2/vendor/bootstrap/scss/bootstrap'
...

without dom config, table gives that

what's wrong? thanx

StephanieDefresnes commented 3 years ago

I found the soluce: i remove gulp dependances and reinstall sb admin 2 to be sure that all is ok i replaced datatables require into user_search_app.js

require('datatables.net/js/jquery.dataTables.min.js');
require('datatables.net-bs4/js/dataTables.bootstrap4.min.js');

and user_search_app.scss

@import '~datatables.net-bs4/css/dataTables.bootstrap4.css';

than done yarn encore dev once again and now bootstrap classes are into fields

if it helps..