Bootstrap 4 (nav dropdown) vs Datatables.net Editor 1.7.2 issue (incompatibility)

d052057 · April 2018

I just found one issue with Bootstratp 4 and Editor 1.7.2 dropdown problem. I just want to know that this is an known issue or is it just me who is know to the Bootstrap 4 and the Editor 1.7.2.

Basically, I can not get the "Dropdown link" expands if I am in the "Features" web page (it does have Datatables.net and Editor on the webpage). However the rest of other webpages are working find.

I debugged the issue and it leads me to the class 'download' event in Editor 1.7.2 which is conflcted to the class 'download' in the boostrap 4.

Thank you.

Datatables.net and Editor:
<%--datatables--%>
<link rel="stylesheet" href="../DataTables/DataTables-1.10.16/css/dataTablesPens.css" />
<script type="text/javascript" src="../DataTables/dataTables.min.js"></script>
<%-- select--%>
<link rel="stylesheet" href="../DataTables/Select-1.2.5/css/select.bootstrap4.min.css" />
<script type="text/javascript" src="../DataTables/Select-1.2.5/js/dataTables.select.min.js"></script>
<%--editor--%>
<link rel="stylesheet" href="../DataTables/Editor-1.7.2/css/editor.bootstrap4.min.css" />
<script src="../DataTables/Editor-1.7.2/js/editor.bootstrap4.min.js"></script>
<%--buttons--%>
<link rel="stylesheet" href="../DataTables/Buttons-1.5.1/css/buttons.bootstrap4.min.css" />
<script src="../DataTables/Buttons-1.5.1/js/buttons.bootstrap4.min.js"></script>

Bootstrap 4 navigator:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link bg-primary-brand text-white" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link bg-primary-brand text-white" href="/Rates/DataTablesExamples.aspx">Features</a>
</li>
<li class="nav-item">
<a class="nav-link bg-primary-brand text-white" href="/Rates/carousel.aspx">Slider</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle bg-primary-brand text-white" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>

d052057 · April 2018

i have put a complete code so that you can see what happened to the dropdown box in the nav bar menu.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap with Datatables Editor Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <%--datatables--%>
    <link rel="stylesheet" href="../DataTables/DataTables-1.10.16/css/dataTablesPens.css" />
    <script type="text/javascript" src="../DataTables/dataTables.min.js"></script>
    <%-- select--%>
    <link rel="stylesheet" href="../DataTables/Select-1.2.5/css/select.bootstrap4.min.css" />
    <script type="text/javascript" src="../DataTables/Select-1.2.5/js/dataTables.select.min.js"></script>
    <%--editor--%>
    <link rel="stylesheet" href="../DataTables/Editor-1.7.2/css/editor.bootstrap4.min.css" />
    <script src="../DataTables/Editor-1.7.2/js/editor.bootstrap4.min.js"></script>
    <%--buttons--%>
    <link rel="stylesheet" href="../DataTables/Buttons-1.5.1/css/buttons.bootstrap4.min.css" />
    <script src="../DataTables/Buttons-1.5.1/js/buttons.bootstrap4.min.js"></script>
    <script type="text/javascript">

        var editor; // use a global for the submit and return data rendering in the examples
        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                table: "#example",
                fields: [{
                    label: "Row:",
                    name: "DT_RowId"
                },
                {
                    label: "Name:",
                    name: "Name"
                },
                {
                    label: "Salary:",
                    name: "Salary"
                }
                ]
            });
            $('#example').DataTable({
                dom: "Bfrtip",
                //ajax: "../php/staff.php",
                columns: [
                    { data: "DT_RowId" },
                    { data: "Name" },
                    { data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
                ],
                select: true,

                buttons: [
                    {
                        extend: "create",
                        editor: editor,
                        className: "btn btn-success"
                    },
                {
                    extend: "edit",
                    editor: editor,
                    className: "btn btn-info"
                },
                {
                    extend: "remove",
                    editor: editor,
                    className: "btn btn-danger"
                }
                ]
            });
        });

    </script>
</head>
<body>
    <br>

    <div class="container">
        <h2>Toggleable Pills</h2>
        <br>
        <!-- Nav pills -->
        <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#menu2">Datatables Editor</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div id="home" class="container tab-pane active">
                <br>
                <h3>HOME</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="menu1" class="container tab-pane fade">
                <br>
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="container tab-pane fade">
                <br>
                <table id="example" class="table display" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Row</th>
                            <th>Name</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mrs Jolie</td>
                            <td>320800</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Mr Jolie</td>
                            <td>20800</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

allan · April 2018

If you update to 1.7.3 I believe this should be resolved. There was a typo in the Bootstrap integration causing this.

Allan

d052057 · April 2018

I have upgrade to 1.7.3 and it did not resolve or fix the issue.

d052057 · April 2018

Here is the code with 1.7.3

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap with Datatables Editor Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


    <link href="../animate.css-master/animate.min.css" rel="stylesheet" />
    <!--<link rel="stylesheet" href="../DataTables/DataTables-1.10.16/css/dataTablesPens.css" />-->
    <link href="../DataTables/DataTables-1.10.16/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <script type="text/javascript" src="../DataTables/dataTables.min.js"></script>
  
    <link rel="stylesheet" href="../DataTables/Select-1.2.5/css/select.bootstrap4.min.css" />
    <script type="text/javascript" src="../DataTables/Select-1.2.5/js/dataTables.select.min.js"></script>

    <link rel="stylesheet" href="../DataTables/Editor-1.7.2/css/editor.bootstrap4.min.css" />
    <script src="../DataTables/Editor-1.7.3/js/editor.bootstrap4.min.js"></script>

    <link rel="stylesheet" href="../DataTables/Buttons-1.5.1/css/buttons.bootstrap4.min.css" />
    <script src="../DataTables/Buttons-1.5.1/js/buttons.bootstrap4.min.js"></script>
    <script type="text/javascript">

        var editor; // use a global for the submit and return data rendering in the examples
        $(document).ready(function () {
            editor = new $.fn.dataTable.Editor({
                table: "#example",
                fields: [{
                    label: "Row:",
                    name: "DT_RowId"
                },
                {
                    label: "Name:",
                    name: "Name"
                },
                {
                    label: "Salary:",
                    name: "Salary"
                }
                ]
            });
            $('#example').DataTable({
                dom: "Bfrtip",
                //ajax: "../php/staff.php",
                columns: [
                    { data: "DT_RowId" },
                    { data: "Name" },
                    { data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$') }
                ],
                select: true,

                buttons: [
                    {
                        extend: "create",
                        editor: editor,
                        className: "btn btn-success"
                    },
                {
                    extend: "edit",
                    editor: editor,
                    className: "btn btn-info"
                },
                {
                    extend: "remove",
                    editor: editor,
                    className: "btn btn-danger"
                }
                ]
            });
        });
        
    </script>
</head>
<body>
    <br>
    <div class="container">
        <h2 class="animated fadeInDownBig">Toggleable Pills</h2>
        <br>
        <!-- Nav pills -->
        <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="pill" href="#menu2">Datatables Editor</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div id="home" class="container tab-pane active">
                <br>
                <h3>HOME</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
            <div id="menu1" class="container tab-pane fade">
                <br>
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="container tab-pane fade">
                <br>
                <table id="example" class="table display" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Row</th>
                            <th>Name</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mrs Jolie</td>
                            <td>320800</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Mr Jolie</td>
                            <td>20800</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

d052057 · April 2018

There is a typo in the code 1.7.2 instead 1.7.3 in the code. However, it doesn't make any differences - they are both not working.

Thanks.

allan · April 2018

Could you show me a screenshot of the issue so I can try to replicate it locally, or even better, a link to a page showing the problem?

Thanks,
Allan

d052057 · April 2018

capture.png: show dropdown link (It can not be expanded when there is DTE).
capture2.png: show dropdown link get expanded (when there is no DTE)

allan · April 2018

Thanks. I totally misunderstood the issue before!

I'm afraid I don't know what is causing the issue you are seeing there and would need a link to a page that shows the issue. All of the styles used by Editor should be wrapped by a div.DTE class to ensure they don't conflict, but its possible something has been missed. As I say, I'd need a link to a page showing the issue so I can inspect the page to be able to diagnose it.

Allan

Bootstrap 4 (nav dropdown) vs Datatables.net Editor 1.7.2 issue (incompatibility)

Bootstrap 4 (nav dropdown) vs Datatables.net Editor 1.7.2 issue (incompatibility)

Answers

Howdy, Stranger!

Categories

DataTables

Bootstrap 4 (nav dropdown) vs Datatables.net Editor 1.7.2 issue (incompatibility)

Bootstrap 4 (nav dropdown) vs Datatables.net Editor 1.7.2 issue (incompatibility)

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables