Need to apply styles to pInput

richleach · 09 Jul 2018, 18:24

I have a <textarea pInputTextarea... styleClass="notes-text"> field that I would like to add some custom styling to.

On the same .html page at the top of the page I added a <style> section and I added
.notes-text .ui-inputtextarea {
border: 1px solid red;
}

... however my styles are not appearing.

Does anyone know how to do this?

Thanks,

Rich

PS Reposting to try to get response, thanks.

Primaryw · 11 Jul 2018, 16:36

Your CSS looks incorrect. Because you applied "notes-text" as a component attribute, PrimeNG is writing something like this:

Code: Select all

<textarea ...   class="ui-inputtextarea notes-text" ...>

Your CSS says, "Apply this style to any element with class ui-inputtextarea which resides within a container of class "notes-text." But that isn't what PrimeNG is creating for the DOM (page).

Your code is looking for this:

Code: Select all

<div class="notes-text" ...>
    <textarea ... class="ui-inputtextarea"></textarea>
</div>

PrimeNG is creating a textarea which contains multiple classes.

So, you need to write a style that says, "Apply this style to any element with BOTH .ui-inputtextarea AND .notes-text. Like this:

Code: Select all

.ui-inputtextarea.notes-text {
...
}

Cheers!

richleach · 12 Jul 2018, 15:05

... first of all thank you for your help with this!

I got confused with styling these controls; I thought in order to override existing PrimeNG styles (that were the PrimeNG control's default or DOM objects that were dynamically generated by the PrimeNG control) I had to use .ui-inputtextarea in my custom selector for the pInputTextarea, is that not the case?

Ultimately I got this to work by assigning my textarea an id value (id="myForm"), and referenced it in my selector with #myForm { property:value; }. (I didn't use the reference to the class "notes-text" at all).

Unfortunately this approach doesn't always work with styling other PrimeNG controls, so I'm hoping you can clarify the best practice for overriding PrimeNG styles with custom styles... Any good rules of thumb on how to do this?

Again, thank you for your input and your help is appreciated!

Rich

Primaryw · 12 Jul 2018, 15:38

HI, Rich.

When I need to do it quickly, here's how I accomplish the task. I add a class to the html body tag.

Code: Select all

<body class="myClass">

From there, I can override this:

Code: Select all

.ui-textarea {
...
}

by simply using this:

Code: Select all

.myClass .ui-textarea {
. ..my over-riding-styles-go-here...
}

Remember one other thing: Sometimes you have to negate the PrimeNg styles. If PrimeNg has a style for left and right padding that you don't want, you have to override both.

Anyhow, glad I could assist. FYI, this is called CSS Specificity in the event you decide to research further.

richleach · 17 Jul 2018, 20:49

Getting closer! Here's what I did:

I added
class="primeoverride"
to the body tag in my index.html

In the .css file of my component I added
.primeoverride .ui-panel-title{
color: red;
}

In the .html file of my component I continue to have
<div class="ui-g-4 ui-sm-12">
<p-panel header="Client">
...angular/html code....
</p-panel>
</div>

My expectation is to see the word "Client" in red, but it's not happening yet.

When I inspected the word Client in Chrome I get:
<span class="ui-panel-title ng-tns-c8-2">Client</span>

I probably missed something simple huh?

Thanks again for your help,

Rich

Primaryw · 18 Jul 2018, 01:12

You're on the right track. The Inspect window will also tell you which styles are overriding yours. They list in order of specificity from top to bottom. So look for something that says which color it actually displays, then change your specificity (the CSS) to match. When you start it with

Code: Select all

 .primeoverride

it will overtake any other style(s) applied.

If that dosn't work, make a https://stackblitz.com and share it.

richleach · 18 Jul 2018, 17:57

Well no success yet but I wonder if it isn't something specific about my code - here are the styles from my Chrome Styles tab:

(1) element.style {
}

(2) body .ui-panel .ui-panel-titlebar .ui-panel-title {
line-height: 1.5em;
color: #4a4a4a; (strikethrough)
}

(3) span.ui-panel-title {
color: #4a4a4a; (strikethrough)
}

(4) .ui-widget-header, .ui-panel-titlebar, .ui-panel-title, .panel-subheader {
background: #ffffff !important;
color: #4a4a4a !important;
font-size: 1.8rem;
}

I found that, if I edited the color value in the last style (4) while in the browser I could change the color of my font onscreen, so I went after that style in my component's CSS file but couldn't make the font color change work from there. Here are some of the permutations that I tried:

.ui-widget-header, .ui-panel-titlebar, .ui-panel-title, .panel-subheader{color:red;}
.primeoverride .ui-widget-header, .ui-panel-titlebar, .ui-panel-title, .panel-subheader{color:red;}
and for good measure I tried
.primeoverride span.ui-panel-title{color:red;}
.primeoverride body .ui-panel .ui-panel-titlebar .ui-panel-title{color:red;}
... even though those selectors' color values were strikethrough and overridden.

I wonder if I'm correctly trying to utilize the 4th style but not referencing it correctly as only the .ui-panel-title class is being applied? For grins I tried
.primeoverride.ui-panel-title{color:red;} as well as
.primeoverride .ui-widget-header, .ui-panel-titlebar, .ui-panel-title, .panel-subheader{color:red;}

and that also did not work.

I'm not able to run on stackblitz because of security issues so I'm hoping I've been clear enough with my long-winded explanation.

Thank you again for your help, very appreciated!

Rich

Need to apply styles to pInput

Who is online