ASP.NET MVC Change CSS Default Class

Hi,

I don't recommend to change this, chance that this will break Datatables code / logic.
Related to your previous question you need to adapt your code to use Datatables container, that should fix the problem.

You can place the custom CSS class into you custom.css file and place this file after Datatables.css file

.dataTables_filter {   
   /* add your custom CSS or change the actual CSS */
   position: absolute !important;     
   top: 49px;    
   left: 0;    
   padding: 10px 28px 0 28px; 
} 

Select allOpen in new window

Note doing this will change for all Datatables.

If you want to do change for only one datatables then use it in combinaison with table ID.

lenamtl,
You mean I need to add in the same class(.dataTables_filter) in CSS, but I need to overide the css for only one table not for all. How this will work if I add under .dataTables_filter

Also about filter I highly recommend the use of Yadcf as the one that come with Datatables is not very good / not flexible
https://github.com/vedmack/yadcf
http://yadcf-showcase.appspot.com/ajax_source.html

For example with Yadcf you can use external container (this is what I use)
http://yadcf-showcase.appspot.com/dom_source_externally_triggered.html

Something like this

#mytable.dataTables_filter {      
/ *  add your custom CSS or change the actual CSS   */
 position: absolute !important;      
 top: 49px;      
 left: 0;      
 padding: 10px 28px 0 28px;
}  

Select allOpen in new window

I cannot do this since my table ID is dynamic. I need to add a class to this one table and override all the datatable filter class.

Check Yadcf this probably more flexible for your needs so you won't need to edit Datatables CSS.
http://yadcf-showcase.appspot.com/dom_source_externally_triggered.html 

You can also add a class for this table

.mytable, .dataTables_filter {      
 / *  add your custom CSS or change the actual CSS   */  
position: absolute !important;        t
top: 49px;        
left: 0;        
padding: 10px 28px 0 28px;
 }  

Select allOpen in new window

Can we take #tableID like it starts with, that way I can add custom custom class on that dynamic table and change the css based on the ID.

For e.g. my table id is #tblTest12345, can I table first 6 characters #tblTest and change table css ?

You can do it with Javascript but I'm not sure if this will work well with Datatables
Because Datatables have a lot of callback mechanism (draw ect)  and you will probably need to cover them all...  

Could you show an image of the problem you having with this table and why you don't have it with other table..

lenmatl,

Attached is a screenshot, I have two JQuery datatables with the CSS my search or filter is overlapping due to this.
The first search box in the screenshot is when I have one datatable, the next one is when I had two datatables then the  two overlaps due to the CSS element top: 49px.

Hope this helps!

Hi,

I don't see clearly what is the problem from the image.

So if you have 2 different tables (not parent / child) like in your previous question.
Then you just need to put each table into a DIV and set some padding / margin to each DIV.
So this way if the table is empty you will have some room between the 2 tables.

If you refering to child / parent then use this example
http://live.datatables.net/fecunaho/69/edit

Hi, yes it's a continuation of the old issue. I found the CSS is causing the issue in my case. I already have a div to separate both the tables.

If I remove top:49px in my css it's working, but only issue is other tables in the app having problems since the search box is very next to header of the datatable. That is the reason we had top:49px for that.

The top value is needed so I would not change that to prevent breaking the code.
If you have this overlap this is because you are not following Datatables code for the container.
It's better to fix this instead of bypassing Datatables logical  because later you will encounter other issues (with other plugins extension that use this container).

For child / parent logical with search for each this is the way to do it
http://live.datatables.net/fecunaho/69/edit

lenamtl,

Can you please explain what you meant by I'm "not following Datatables code for the container. "

Thanks lenamtl. It helps me, I don't see the issue in my code except the css.

Check your custom CSS (if you have custom CSS file check classes related to table or check inline CSS) that could cause the issue.