The issue I'm facing involves Materialize CSS interfering with the rendering of input fields from PrimeNG. Does anyone have a solution to resolve

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:

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

Answer №1

If materializecss is overriding the same classes that primeng uses, one solution is to load them in a different order - first materializecss and then primeng css. By doing this, you can ensure that primeng css will take precedence over the classes defined by materialize.

To address this issue, identify which classes materialize is overriding and focus on resolving those conflicts.

Edit

This example in the following plnkr demonstrates the problem:

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

Here's how you can fix it:

When inspecting the input box using developer tools, I noticed that materialize.css has a specific class applied:

https://i.sstatic.net/vmnjd.jpg

In this case, the CSS class with the highest priority overrides the primeng class. It also suggests using the :not(.browser-default) pseudo-class. To counteract this, add the browser-default class to your input element.

Check out this updated plnkr for reference:

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

The simple solution was to include the browser-default class in the input:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show the layout of the table in a visual format

I am struggling to showcase a table created using <ul> tags. I want the content to be displayed one after the other. Here is my code: CSS .activity-list-header > li { display: inline-block; text-align: left; width: 15.666%; list- ...

Issue with zeroLineColor and zeroLineWidth not functioning properly for the x-axis within Chartjs

Looking to customize the width and color of the x-axis in Chartjs? While it's straightforward for the y-axis using zeroLineColor and zeroLineWidth, achieving the same effect for the x-axis seems trickier. If you try adding: ticks: { beginAtZero: tr ...

How I made my WordPress columns automatically resize with the help of Bootstrap

Currently, my Wordpress template utilizes Bootstrap 2.3.1 with two areas set up using SPAN4 and SPAN8. The resolution is fixed at 1170px, so there's no need to configure the lg component of Bootstrap. I'm looking for assistance in properly confi ...

Checking the Value of the Second Child Element Using jQuery

I am struggling with a DIV structure that looks like this: <div class="metafield_table"> <div class="metafield"></div> <div class="metafield"></div> <div class="metafield"> ...

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

Recently stumbled upon a fascinating website called "3D Meninas", showcasing an impressive 3D animation effect. Upon examining the HTML code, I noticed there was no mention of any <script> tags or events, leading me to believe that it operates solely ...

Gain command over the underline style of text without relying on the border property

Ingredients: just a simple text input field. Question: Is there a way to customize the size, color, and position of the underline styling on an input tag? I noticed that the property text-decoration-color is supported in the moz browser engine, but I&apos ...

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

Is it possible to personalize the Carousel-indicators feature within react-responsive-carousel?

I am currently utilizing the react-responsive-carousel library. I would like to modify the default indicators CSS, changing the dots shape to a line shape. Here is my code snippet: <CarouselWrapper sx={{ marginTop: "124px", maxHeight: & ...

What could be causing these "areas" or "panels" to intersect with each other?

As I work on constructing a website, I'm facing an issue with the top two sections. They appear correctly when my screen is full size, but as soon as I adjust the screen size, they jump down and create white space. It seems like I may have approached ...

Struggling to get custom button hover styles to work in React?

In the React project I'm working on, there is a button that has been configured in the following manner. <label style={styles.label}> <input style={styles.input} type="file" accept="image/*" onChange={this.onUpload} /& ...

Adjust size of item within grid component in VueJS

I have a grid container with cells and a draggable item in a Vue project. I am trying to figure out how to resize the box inside the grid component (refer to images). https://i.stack.imgur.com/q4MKZ.png This is my current grid setup, and I would like the ...

Running the command "nexrjs create next-app" successfully generates all the necessary directories for the

After trying to install NextJS using both methods npm install next react react-dom and npx create-next-app appname, I noticed that my project directories are different from what they are supposed to look like: Instead of having pages, api(_app.js, index.j ...

The behavior of Elementor lightbox buttons upon being clicked

When using Android, I've noticed that the lightbox briefly displays a semitransparent cyan bar on the left and right buttons when they are pressed. Is there a way to control or prevent this behavior? Any suggestions would be appreciated! Thanks in adv ...

What is the best way to restrict user input to specific numbers only?

I have a text input field, how can I ensure that only numeric values from 1 to 31 are allowed? <input type="number" min="1" max="31"> ...

HTML/CSS flowchart illustration

Is there a user-friendly method to create a flow or swimline diagram without relying on scripting or tables? Specifically, I'm looking for a way to display different hosts sending packets (with hosts along the X axis, time along the Y axis, and arrows ...

Utilizing box-sizing for the creation of an internal border

Looking to create an HTML table with clickable cells, each containing a div that adds a border upon clicking. The challenge is ensuring the border stays within the boundaries of the td without altering the size of the table or its cells. Struggling to achi ...

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

Incorporating a PHP line into a CSS file that is dynamically generated by PHP code

Struggling with adding a get_template_directory_uri() in a CSS line located in a boxes.php file. $box_first = 'linear-gradient(rgba(0, 175, 227, .8), rgba(0, 175, 227, .8)), url("/wp/wp-content/themes/my_theme/inc/img/boxes/box2.png") center ...

Blog entries alternating between a pair of distinct hues

I want to create a design where each post container has a different color from the one next to it. Essentially, I would like the containers to alternate between two distinct colors. The left side shows how it currently appears, while the right side depict ...

Challenges arise with the safari navigation bar within a PWA platform

Struggling with the formatting and spacing issues of a PWA application on IOS devices due to notches and navbar heights. One specific problem is that a chat input with absolute positioning and bottom: 0 does not display properly in Safari because of the n ...