Datatables Material Design Bug

.jodadev. pro commented 5 years ago

Hi Piotr,

Thanks for the help, but it didn't work. What you did was assigned the placeholder search into #NumberID. I want to the placeholder search to appear on the search without affecting all the other inputs including the #NumebrID. Maybe if we replace the '#NumberID' of $('#NumberID').attr("placeholder", "Search"); with the ID of the search will probably work right? So what's the ID of the search so I can assign the placeholder specifically to that one? Also don't you guys think y'all should change the code? Because if you look at $('input').attr("placeholder", "Search"); which is the original code on the docs, you are basically assigning the placeholder to ALL the inputs which makes no sense, why not change the code to assign the placeholder SPECIFICALLY to the search input?

Also, $('#dtBasicExample_length > label > select').css('height','38px'); didn't work and the 'Show entries' is still higher and not aligned with the 'Search' bar. Any help on how to make them aligned?

I tried making a snippet so you can see and test, but is not showing datatables, but here is the link to see if you can make datatable appear and make it easier to test the issues: https://mdbootstrap.com/snippets/jquery/jonathan-2/1084811

.jodadev. pro commented 5 years ago

HI Piotr,

Thanks for the help, but you still didn't tell me the ID of the search bar to include placeholder. So, again, how can I make the search palceholder appear on ONLY in the search bar? because $('#YourDesiredID').attr("placeholder", "Your placeholder content"); only works if I know the ID of the search bar. Also, I understand the block of code on the docs for material design is 'basic 'execution' but when we use it and it doesn't work and there's no explanation on how to adjust it accordingly, then it makes the docs not very useful; just giving feedback.

Also, $('#dtBasicExample_length > label > select').css('height','38px'); does not work. I did place it after the intialization. Here's an example of the code:

// Material Design example $(document).ready(function () { $('#dtMaterialDesignExample').DataTable(); $('#dtMaterialDesignExample_wrapper').find('label').each(function () { $(this).parent().append($(this).children()); }); $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () { $('input').attr("placeholder", "Search"); $('input').removeClass('form-control-sm'); }); $('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row'); $('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form'); $('#dtMaterialDesignExample_wrapper select').removeClass( 'custom-select custom-select-sm form-control form-control-sm'); $('#dtMaterialDesignExample_wrapper select').addClass('mdb-select'); $('#dtMaterialDesignExample_wrapper .mdb-select').materialSelect(); $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove(); });

$('#dtMaterialDesignExample_length > label > select').css('height','38px');

ANy idea what could be wrong? Also why not aligned it as default? The original datatables is nice and aligned, not sure why this version has to be not aligned.

.jodadev. pro commented 5 years ago

Also, not sure why you told me to add #NumberId to the placeholder with search when I'm specifically asking how to include the search placeholder into the search bar. You say it was an example but I think you just don't understand the question. So, again, how can I make the search placeholder appear ONLY in the search bar and NOT on all the inputs? Thanks.