Datatables mdbselect

hideDropdown();

Skalle pro commented 7 years ago

Is this applicable to version 4.4.4 ?

---

Mikołaj Smoleński staff commented 7 years ago

Yes, it should also work.

---

Skalle pro commented 7 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

---

Josip Tomašev pro premium priority commented 7 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?

---

Mikołaj Smoleński staff commented 7 years ago

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

---

Mikołaj Smoleński staff commented 7 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; }

---

Skalle pro commented 7 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

---

Mikołaj Smoleński staff commented 7 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.

---

$(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!

---