Topic: Datatables mdbselect

jivancic pro asked 6 years ago


I noticed mdb select function which allows you to define number of records to show on table is behaving not normal . check out on your page . https://mdbootstrap.com/previews/templates/admin-dashboard/html/tables/datatables.html when you select 25 /50 /100 , mouse is sticking to numbers and not releasing .. Quite annoying . how to fix easily ?  

jivancic pro commented 6 years ago

Will you ever plan to reply questions in this century ? :)

vgaire007 free answered 6 years ago


I tried this and it worked for me, add this code in the footer section :
$(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!

Mikołaj Smoleński staff answered 6 years ago


Hi jivancic, Please add following code in mdb.js in line nr 14952:
hideDropdown();
Regards

Skalle pro commented 6 years ago

Is this applicable to version 4.4.4 ?

Mikołaj Smoleński staff commented 6 years ago

Yes, it should also work.

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

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?

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()); })

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; }

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

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags