Search code examples
cssmaterializeprimengprimeng-datatable

Materilaize css breaking primeng rendering of input field. How do I fix this css?

I have the following code:

<div class="container" style="width:100%;">
<div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none">
    <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
    <input #gb type="text" pInputText size="50" placeholder="Global Filter">
</div>

<p-dataTable [value]="cars" [globalFilter]="gb">
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="brand" header="Brand"></p-column>
    <p-column field="color" header="Color"></p-column>
</p-dataTable>

</div>

My component has: 

  cars = [{
    'vin': 'von',
    'year': '1990',
    'brand': 'Audi',
    'color': 'blue'
  },{
    'vin': 'another',
    'year': '2050',
    'brand': 'Honda',
    'color': 'silver'
  }
  ]

This should be fine, but the problem is I want to use primeng with materializecss. Is there a way I can make it so that for the input box, it does not use materializecss's styling and preserves what primeng already has? At this point, the search box looks messed up with the magnifying glass being above the input field and not inline.

enter image description here

Its supposed to look like this:

https://www.primefaces.org/primeng/#/datatable/filter

Solution

  • If materalizecss overrides same class that primeng uses, you could just load them in different order, first materalizecss then primeng css. This will ensure that primeng css will override same classes materalize defines.

    Find out which class materalize overrides and try to work on that.

    Edit

    I think this plnkr provides an example of your problem

    http://plnkr.co/edit/6ptJJw8z9fOgHAAfSv4u?p=preview

    Here is how you can fix it

    When I open developer tools and select the input box that I want to examine, it shows me that materalize.css has a class as follows

    enter image description here

    As you can see here, this css class has highest priority and overrides primeng class. Also, it gives a hint that is :not(.browser-default) pseudoclass. So if you give your input browser-default class, this rule won't apply.

    Check this plnkr

    http://plnkr.co/edit/hTa2yxNZJP2Z8p91tQ9t?p=preview

    All I did is to add browser-default class to the input

    <input #gb type="text" class="browser-default" pInputText size="50" placeholder="Global Filter">