Search code examples
jquerydatatablesjquery-datatables-editor

Datatables Editor Buttons Not Showing On Long Modal

I am using Datatables Editor in my PHP/mySQL website.

When a modal form opens that is long (with a scroller), the UPDATE button that is supposed to show in the bottom right of the modal does not show on first click.

As first click, the shorter modals with no scroll bar have the UPDATE button displaying.

If I close the long modals by clicking the 'x' in the upper right of the form and re-open the editor, the UPDATE finally shows.

I have an image showing how there is no update button in edit mode displayed. Not sure what other info I can give you to help.

enter image description here

I have a lot of scripts for my site which uses Bootstrap.

Here's how I load my .js files.

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>

 <script src="assets/global/plugins/jquery-migrate.min.js" type="text/javascript"></script>

 <script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
 <script src="assets/global/plugins/jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
 <script src="assets/global/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
 <script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
 <script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>

 <script src="https://cdn.datatables.net/buttons/1.2.1/js/dataTables.buttons.min.js" type="text/javascript"></script>
 <script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js" type="text/javascript"></script>

.. and my css files are in this order:

 <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"/>
 <link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
 <link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
 <link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
 <link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
 <link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap-toastr/toastr.min.css">
 <link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap-summernote/summernote.css">
 <link href="assets/global/plugins/datatables/datatables.min.css" rel="stylesheet" type="text/css" />
 <link href="assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css" rel="stylesheet" type="text/css" />
 <link href="https://cdn.datatables.net/buttons/1.2.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
 <link href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
 <link rel="stylesheet" type="text/css" href="added-assets/plugins/editor/css/editor.dataTables.css">
Solution

  • It's an issue with Chrome, see discussion here, http://www.edoitor.datatables.net/forums/discussion/38145

    A workaround is to alter the css once page is loaded,

    editor.on('open', function () {
            $('div.DTE_Footer').css( 'text-indent', -1 );
        });