0

I'm making a web application using Javascript, AngularJS and Materialize CSS for my UI. Materialize CSS has been a great tool so far but I have a problem.

I want to use Angular-Datatables for my tables but I can't because they're being manipulated by Materialize CSS. You don't even have to write anything special, you just write <table> and you're already using Materialize's table.

So my question is: how do I keep using Materialize CSS for everything else, but use the default tables' CSS so I can use Angular-Datatables?

Thanks.

EDIT:

Here's my HTML code:

<table>
    <thead>
        <tr>
            <th style="width:15%"><b>ID</b></th>
            <th style="width:40%"><b>Title</b></th>
            <th style="width:15%"><b>Start Date</b></th>
            <th style="width:20%"><b>End Date</b></th>
            <th style="width:10%"><b>Type</b></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="task in tasks track by $index">
            <td>{{task.id}}</td>
            <td>{{task.title}}</td>
            <td>{{task.start_day}} {{task.start_time}}</td>
            <td>{{task.end_day}} {{task.end_time}}</td>
            <td>{{task.type}}</td>
        </tr>
    </tbody>
</table>

This code produces the following table:

With angular-datatables, and if you follow their site you just need to change the <table> tag to <table datatable="">, it looks like this:

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Telmo F.
  • 167
  • 1
  • 4
  • 16
  • Are you using SASS or the pre-built Materialize? If you are using SASS simply remove any styling.
     – Richard Howell May 25 '16 at 15:21
  • If you are using pre-built Materialize and Angular-Datatables, I assume you are calling the datatables CSS somewhere in ``, be sure you are calling it after Angular-Materialize CSS. – Richard Howell May 25 '16 at 15:22
  • Please post an example of your code for a more definitive answer. – Richard Howell May 25 '16 at 15:22
  • I guess I'm using pre-built Materialize, I'm certainly not using the SASS version. And yes, I'm loading the angular-datatables CSS after the Materialize CSS. My code is just a basic table in plain HTML. But when you include the Materialize CSS that table automatically becomes the table from Materialize. But angular-datatables is supposed to be used with the normal default table. When you use angular-datatables with a Materialize table it becomes a jumbled mess. – Telmo F. May 25 '16 at 15:31
  • @RichardHowell check my EDIT for my code and images of what the problem looks like. – Telmo F. May 25 '16 at 15:44

1 Answers1

2

You have three choices:

1.) Identify the offending rules added by Materialize and overwrite them to match the styling you require in your own style sheet

2.) Use the un-minified version of Materialize and remove the offending styles

3.) Remove any table styling from Materialize source and compile the SASS yourself (https://prepros.io/ this should work to compile your SASS)

Richard Howell
  • 359
  • 4
  • 11