$(document).ready(function () {
    $('.select-dropdown').remove();
    $('.caret').remove();
    $('select[name="datatables_length"]').addClass('browser-default');
});

Mikołaj Smoleński staff commented 6 years ago

Thanks for Your solution!

Thanks for Your solution!

Please insert min. 15 characters.

Publish

---

hideDropdown();

Skalle pro commented 6 years ago

Is this applicable to version 4.4.4 ?

Is this applicable to version 4.4.4 ?

Please insert min. 15 characters.

Publish

---

Mikołaj Smoleński staff commented 6 years ago

Yes, it should also work.

Yes, it should also work.

Please insert min. 15 characters.

Publish

---

Skalle pro commented 6 years ago

HI, I am pretty sure it is not line 14952, checked version 4.4.4 and 4.4.5. Could you please check? Thanks

HI, I am pretty sure it is not line 14952, checked version 4.4.4 and 4.4.5. Could you please check? Thanks

Please insert min. 15 characters.

Publish

---

Josip Tomašev priority commented 6 years ago

Sorry, but this dont work in 4.4.4 and 4.4.5. It's seams that your line is not correct. Please, can you provide more sorounding js code, so we can easier find correct place?

Sorry, but this dont work in 4.4.4 and 4.4.5. It's seams that your line is not correct. Please, can you provide more sorounding js code, so we can easier find correct place?

Please insert min. 15 characters.

Publish

---

Mikołaj Smoleński staff commented 6 years ago

Please add the following code to Your page: $('.dataTables_wrapper').find('label').each(function() { $(this).parent().append($(this).children()); })

Please add the following code to Your page: $('.dataTables_wrapper').find('label').each(function() { $(this).parent().append($(this).children()); })

Please insert min. 15 characters.

Publish

---

Mikołaj Smoleński staff commented 6 years ago

And also please change Your styles to this: table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { padding: 5px; } .dataTables_wrapper .mdb-select { border: none; float: left; } .dataTables_wrapper .mdb-select.form-control { padding-top: 0; margin-top: -1rem; margin-left: 0.7rem; margin-right: 0.7rem; width: 100px; } .dataTables_length label { float: left; }

And also please change Your styles to this: table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after { padding: 5px; } .dataTables_wrapper .mdb-select { border: none; float: left; } .dataTables_wrapper .mdb-select.form-control { padding-top: 0; margin-top: -1rem; margin-left: 0.7rem; margin-right: 0.7rem; width: 100px; } .dataTables_length label { float: left; }

Please insert min. 15 characters.

Publish

---

Skalle pro commented 6 years ago

can not spend more time on this, none of the suggested solutions work for me. There is some pretty dodgy prevention of defaults in the jqery code everywhere. It looks like there are some issues around focus of the dropdown. if you add a .blur to the following section of code (in mdb.js, line 14765): /* START CODE SNIPPET */ // Click handler to show dropdown origin.unbind('click.' + origin.attr('id')); origin.bind('click.' + origin.attr('id'), function (e) { if (!isFocused) { if (origin[0] === e.currentTarget && !origin.hasClass('active') && $(e.target).closest('.dropdown-content').length === 0) { e.preventDefault(); // Prevents button click from moving window placeDropdown('click'); /* add input blur */ $('input').blur(); } // If origin is clicked and menu is open, close menu else if (origin.hasClass('active')) { hideDropdown(); $(document).unbind('click.' + activates.attr('id') + ' touchstart.' + activates.attr('id')); } // If menu open, add click close handler to document if (activates.hasClass('active')) { $(document).bind('click.' + activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) { if (!activates.is(e.target) && !origin.is(e.target) && !origin.find(e.target).length) { hideDropdown(); $(document).unbind('click.' + activates.attr('id') + ' touchstart.' + activates.attr('id')); } }); } } }); } // End else /* END CODE SNIPPET */ moving the focus away makes the dropdown close and be selectable again

can not spend more time on this, none of the suggested solutions work for me. There is some pretty dodgy prevention of defaults in the jqery code everywhere. It looks like there are some issues around focus of the dropdown. if you add a .blur to the following section of code (in mdb.js, line 14765): /* START CODE SNIPPET */ // Click handler to show dropdown origin.unbind('click.' + origin.attr('id')); origin.bind('click.' + origin.attr('id'), function (e) { if (!isFocused) { if (origin[0] === e.currentTarget && !origin.hasClass('active') && $(e.target).closest('.dropdown-content').length === 0) { e.preventDefault(); // Prevents button click from moving window placeDropdown('click'); /* add input blur */ $('input').blur(); } // If origin is clicked and menu is open, close menu else if (origin.hasClass('active')) { hideDropdown(); $(document).unbind('click.' + activates.attr('id') + ' touchstart.' + activates.attr('id')); } // If menu open, add click close handler to document if (activates.hasClass('active')) { $(document).bind('click.' + activates.attr('id') + ' touchstart.' + activates.attr('id'), function (e) { if (!activates.is(e.target) && !origin.is(e.target) && !origin.find(e.target).length) { hideDropdown(); $(document).unbind('click.' + activates.attr('id') + ' touchstart.' + activates.attr('id')); } }); } } }); } // End else /* END CODE SNIPPET */ moving the focus away makes the dropdown close and be selectable again

Please insert min. 15 characters.

Publish

---

Mikołaj Smoleński staff commented 6 years ago

Skalle, can You try to update Your table by new js code from our documentation? https://mdbootstrap.com/content/tables/#sorting That issue in now fixed and adding new lines of js code should help.

Skalle, can You try to update Your table by new js code from our documentation? https://mdbootstrap.com/content/tables/#sorting That issue in now fixed and adding new lines of js code should help.

Please insert min. 15 characters.

Publish

---