Datatables Material Design Bug

Topic: Datatables Material Design Bug

.jodadev. pro asked 5 years ago

Hello,

So there's two issues currently with datatables Material design.

1) When trying to use Datatables Material design and entering its code (Its on this page: https://mdbootstrap.com/docs/jquery/tables/datatables/):

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

It makes the word 'Search' appear on ALL the other labels that are in the same page, like this one:

<div class="md-form">
    <input type="text" id="NumberID" class="form-control">
    <label for="NumberD">Number (ID)</label> //Search appears here on top of this label
</div>

How can I fix this so the word "search" doesn't appear on all the labels?

2) The Show Entries and Search on top of datatables are not aligned. How can I aligned them? You can see on this page how both things aren't align, the show entries is higher then the search and doesn't look good: https://mdbootstrap.com/docs/jquery/tables/datatables/

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

Hi .jodadev,

To check the id of the search bar you just inspect your site and check the id of the desired element if you don't know how to get this from HTML structure. The id of the search select you declare inside your HTML structure. You can even just inspect the element and copy selector from the DOM structure. In our datatables the basic selector for search field looks like this:
<code>$('#dtMaterialDesignExample_filter > input.form-control')</code>

On this element you can make all jQ methods, for example, changing the placeholder like this:
<code>.attr("placeholder", "Search")</code>

Your code indicates that you wait for the document to be ready before you initialize data tables but you don't wait to change the element height. You basically changed the height of the element that doesn't even exist yet. Your code should look like this:

<pre class="prettyprint"><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');
</code></pre>

});

If you need additional help I am here for you.

Best Regards, Piotr

Please insert min. 20 characters.

Hi .jodadev,

To check the id of the search bar you just inspect your site and check the id of the desired element if you don't know how to get this from HTML structure. The id of the search select you declare inside your HTML structure. You can even just inspect the element and copy selector from the DOM structure. In our datatables the basic selector for search field looks like this: $('#dtMaterialDesignExample_filter > input.form-control')

On this element you can make all jQ methods, for example, changing the placeholder like this: .attr("placeholder", "Search")

Your code indicates that you wait for the document to be ready before you initialize data tables but you don't wait to change the element height. You basically changed the height of the element that doesn't even exist yet. Your code should look like this:

// 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');

});

If you need additional help I am here for you.

Best Regards, Piotr

.jodadev. pro commented 5 years ago

Thanks for the help. I had to change some things but in the end it finally worked.

Piotr Glejzer staff commented 5 years ago

Hi,
did you resolve your problem because I see that you posted long questions 1 week ago? If not let me know. Have a nice day.
Best,
Piotr

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

Hi jodav,

Before I posted my solution here on the forum I tested my code and it worked just like you wanted. Did you execute <code>$('#dtBasicExample_length > label > select').css('height','38px');</code> after dataTable initialization? You can change the desired selector to serve your needs. It depends on your way of implementation of this component. Make sure it points to the correct DOM element. The select element that lets you pick how many elements are shown on one page of the table is smaller by default. You have to change its height if you want it to be exactly the same as the search field. You can do it with my jQ code or with custom css.

The selector with <code>#NumberID</code> is just an example. If you want to change the default placeholder of any given element you can do it dynamically with this method <code>$('#YourDesiredID').attr("placeholder", "Your placeholder content");</code> with our example we just show the really basic execution of code without any other inputs on the site. If you want to customize your implementation you need o to modify the code. Try to use this code I showed you before after you initialize your tables and check if all jQ selectors are correct (pointing to desired DOM element).

We can not show our plugins examples in snippets right now because we would have to post premium code in them and we would not like to just give it away. We are sorry for that.

If you need additional help just explain your problems below.

Best Regards, Piotr

Please insert min. 20 characters.

Hi jodav,

Before I posted my solution here on the forum I tested my code and it worked just like you wanted. Did you execute $('#dtBasicExample_length > label > select').css('height','38px'); after dataTable initialization? You can change the desired selector to serve your needs. It depends on your way of implementation of this component. Make sure it points to the correct DOM element. The select element that lets you pick how many elements are shown on one page of the table is smaller by default. You have to change its height if you want it to be exactly the same as the search field. You can do it with my jQ code or with custom css.

The selector with #NumberID is just an example. If you want to change the default placeholder of any given element you can do it dynamically with this method $('#YourDesiredID').attr("placeholder", "Your placeholder content"); with our example we just show the really basic execution of code without any other inputs on the site. If you want to customize your implementation you need o to modify the code. Try to use this code I showed you before after you initialize your tables and check if all jQ selectors are correct (pointing to desired DOM element).

We can not show our plugins examples in snippets right now because we would have to post premium code in them and we would not like to just give it away. We are sorry for that.

If you need additional help just explain your problems below.

Best Regards, Piotr

.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.

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.

Please insert min. 15 characters.

.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.

Add comment

MDBootstrap staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi jonathan,

1) Change this $('input').attr("placeholder", "Search"); to $('#NumberID').attr("placeholder", "Search");

2)It's just an illusion created by the fact that search input is larger than the search input. They are aligned by their top border and have the same spacing from the top. If you, however, want to achieve the same height of these elements just simply execute this line of code after the data tables are initiated: $('#dtBasicExample_length > label > select').css('height','38px');

If you need additional help I am here for you.

Best Regards, Piotr

.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

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: <a href="https://mdbootstrap.com/snippets/jquery/jonathan-2/1084811" target="_blank">https://mdbootstrap.com/snippets/jquery/jonathan-2/1084811</a>

Please insert min. 15 characters.

Add comment

Write

Create snippet

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: 4.8.7
Device: laptop
Browser: Chrome
OS: Windows 10
Provided sample code: No
Provided link: Yes

.jodadev.

Pro User 41Support score
15Questions 1Answers 1Snippets