The code I am working with is as follows:
<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>
Within my component, I have the following data for 'cars':
cars = [{
'vin': 'von',
'year': '1990',
'brand': 'Audi',
'color': 'blue'
},{
'vin': 'another',
'year': '2050',
'brand': 'Honda',
'color': 'silver'
}
]
While this structure is acceptable, I am facing an issue where I need to integrate primeng with materializecss. Specifically, I would like the input box to avoid utilizing materializecss styling and instead maintain the appearance provided by primeng. Currently, the search box appears distorted, with the magnifying glass icon positioned above the input field rather than alongside it.
https://i.sstatic.net/yqHVG.png
The desired look can be observed here: