Strange character or mini box appearing in title row of data

web
mobile

Topic: Strange character or mini box appearing in title row of datatable

ssteo pro asked 9 months 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 9 months 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 9 months ago

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


ssteo pro answered 9 months ago

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

Thanks so much for the help.


ssteo pro answered 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months 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 9 months ago

Even on my mobile browser I can reproduce this

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


Piotr Glejzer staff answered 9 months 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 8 months 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 8 months ago

Hmm, did you add web fonts to your server?


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: 4.6.1
  • Device: Laptop
  • Browser: Chrome
  • OS: MacOS
  • Provided sample code: No
  • Provided link: Yes
Tags