Strange character or mini box appearing in title row of data

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Strange character or mini box appearing in title row of datatable

ssteo pro asked 6 years ago

Hi,

Here's the rendered data table, it's showing weird character beside the up/down arrow in both Firefox and Chrome.

https://imgur.com/a/3IoMTAo

Does anyone know if that's a bug or how to hide that?

Unicomp pro commented 6 years ago

I have seen it too. For me a little different because I upgraded to awesome font 5 and now instead of a box, it shows an arrow, but the little triangles are there too. Very annoying.

Piotr Glejzer staff commented 6 years ago

Can you show me HTML example of that problem? Have a nice day.

ssteo pro answered 6 years ago

I see. Sorry as I didn't realize those files were missing earlier.

Thanks so much for the help.

ssteo pro answered 6 years ago

Hi, here's my HTML source

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://static.gitscan.io/admin/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://static.gitscan.io/admin/css/mdb.min.css">
        <link rel="stylesheet" href="https://static.gitscan.io/admin/css/datatables.min.css">
        <title>Title</title>
    </head>
    <body>          

<div class="container">

    <div class="row">
        <div class="col-md">
            <div>
                <table id="dtDashboard" class="table table-striped table-sm text-center table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th class="th-sm font-weight-bold">aaa</th>
                            <th class="th-sm font-weight-bold">bbb</th>
                            <th class="th-sm font-weight-bold">ccc</th>
                            <th class="th-sm font-weight-bold">ddd</th>
                            <th class="th-sm font-weight-bold">eee</th>
                        </tr>
                    </thead>
                    <tbody>


                        <tr>
                            <td>test</td>
                            <td>xx</td>
                            <td>2019-02-09 22:21:05</td>
                            <td>None</td>
                            <td>None</td>
                        </tr>

                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

        </main>
        <script type="text/javascript" src="https://static.gitscan.io/admin/js/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" src="https://static.gitscan.io/admin/js/popper.min.js"></script>
        <script type="text/javascript" src="https://static.gitscan.io/admin/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://static.gitscan.io/admin/js/mdb.min.js"></script>
        <script type="text/javascript" src="https://static.gitscan.io/admin/js/datatables.min.js"></script>
        <footer>


<script type="text/javascript">
    $(document).ready(function () {
        $('#dtDashboard').DataTable();
        $('#dtDashboard_wrapper').find('label').each(function () {
            $(this).parent().append($(this).children());
        });

        $('#dtDashboard_wrapper .dataTables_filter').find('input').each(function () {
            $('input').attr("placeholder", "Search");
            $('input').removeClass('form-control-sm');
        });

        $('#dtDashboard_wrapper .dataTables_length').addClass('d-flex flex-row');
        $('#dtDashboard_wrapper .dataTables_filter').addClass('md-form');

        $('#dtDashboard_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
        $('#dtDashboard_wrapper select').addClass('mdb-select');
        $('#dtDashboard_wrapper .mdb-select').materialSelect();
        $('#dtDashboard_wrapper .dataTables_filter').find('label').remove();
    });
</script>


        </footer>
    </body>
</html>

Piotr Glejzer staff answered 6 years ago

Hi,

I see you are using FA with 4.7 version so this is a problem. We do not support FA4.7 since 4.6.0 update. You have to update to the newest version and this problem will disappear because I don't have that 'mini box'.

Best,
Piotr

ssteo pro answered 6 years ago

Hi, I just updated to the latest FA 5.7.2 it is still the same. May I know which version of FA are you using?

ssteo pro answered 6 years ago

I've also tried FA 5.6.1 as shown in this example but also the same. https://mdbootstrap.com/support/jquery/strange-character-or-mini-box-appearing-in-title-row-of-datatable/

Also, tried 5.6.3 the strange character is showing as well..

Piotr Glejzer staff commented 6 years ago

Did you update our CSS DataTable? Because we change CSS with font-family etc when we updated our package to FA5. I recommend updating all package to our latest version 4.7.1. Have a nice day.

ssteo pro answered 6 years ago

Hi, I've updated everything. All using 4.7.1 still the same. Can you help to verify please?

    <link rel="stylesheet" href="https://static.gitscan.io/admin/css/font-awesome-5.7.2.min.css">
    <link rel="stylesheet" href="https://static.gitscan.io/admin/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://static.gitscan.io/admin/css/mdb-4.7.1.min.css">
    <link rel="stylesheet" href="https://static.gitscan.io/admin/css/datatables-4.7.1.min.css">

Piotr Glejzer staff commented 6 years ago

Can you use developer tools at your browser (f12) and click ctrl+shift+c and click on that miniboxes and make screenshot and show me what is that? Do you have some console errors, maybe? Have a nice day.
edit. I copied your code to snippets and there is no any checkboxes. Here is screenshoot
https://ibb.co/2gqLTPz
I can't save snippet because js code it's too long but I copied js and CSS from our newest package.

ssteo pro answered 6 years ago

It is that ::before and ::after , which I suppose it should be displaying the arrow up and arrow down but it doesn't display the arrow or black triangle.

My web debugger also shows 'Pseudo-elements are not currently supported' ?

https://imgur.com/a/KsTTMzl

Piotr Glejzer staff commented 6 years ago

We don't have this problem with our product If it problem would be in our package we try to solve it as soon as possible but It's look like you have something unnecessary code in your workflow. Did you update your files with the newest version of MDB ( CSS/js etc, I recommend delete old MDB files and upgrade new one)? I want to help you but I can't reproduce that problem. It looks like you try to use old CSS/js with the newest version. Did you clean cache?

ssteo pro commented 6 years ago

Everything is the latest version on MDB 4.7.3.

Can you ask for help from the senior development team who is familiar with the codebase please? I've updated everything and cleared cache and able to reproduce in all browsers.

Would you be able to take a look at this page and it's HTML? https://static.gitscan.io/bug-reproduce.html

ssteo pro answered 6 years ago

Hi, I've updated everything and cleared cache and able to reproduce in all browsers.

Would you be able to take a look at this page and it's HTML? https://static.gitscan.io/bug-reproduce.html

Thanks!

ssteo pro answered 6 years ago

Everything is the latest version on MDB 4.7.3.

Can you ask for help from the senior development team who is familiar with the codebase please?

ssteo pro answered 6 years ago

Even on my mobile browser I can reproduce this

https://imgur.com/a/4iyF1Jb

Piotr Glejzer staff answered 6 years ago

Do you have folders 'webfonts' on your server with font files ? If you are using your own server to hold CSS code from FA5 you have to include font files from FA5. Check your console. You have 10+ errors because you don't include font files ( woff2, woff etc). Have a nice day.

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url(../webfonts/fa-brands-400.eot);
  src: url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-brands-400.woff2) format("woff2"), url(../webfonts/fa-brands-400.woff) format("woff"), url(../webfonts/fa-brands-400.ttf) format("truetype"), url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")
}

.fab {
  font-family: "Font Awesome 5 Brands"
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url(../webfonts/fa-regular-400.eot);
  src: url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-regular-400.woff2) format("woff2"), url(../webfonts/fa-regular-400.woff) format("woff"), url(../webfonts/fa-regular-400.ttf) format("truetype"), url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url(../webfonts/fa-solid-900.eot);
  src: url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../webfonts/fa-solid-900.woff2) format("woff2"), url(../webfonts/fa-solid-900.woff) format("woff"), url(../webfonts/fa-solid-900.ttf) format("truetype"), url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

jouvrard pro answered 6 years ago

Is there Something else to do?

I added your css in my project but I always have the problem and I don't have any error in the console.

Thanks,

Jerome

Piotr Glejzer staff commented 6 years ago

Hmm, did you add web fonts to your server?

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: Laptop
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes
Tags
datatables
Related topics
6
Datatables server-side sorting and pagination
3
Please add support for server side pagination hook as well as it is difficult to fetch huge data from server.
2
Angular 9 , table examples not working
2
DataTables and ajax
1
Datatables filter not working with html in the columns
About author
ssteo
Pro User
99Support score
1Questions 9Answers
0Snippets likes 0Snippets