I'd like to put a conditional styling on a primeng 'p-overlayPanel' element. I have tried:
<p-overlayPanel [styleClass]="#{(bean.comment) ? 'style1' : 'style2'}">, but it's not working.
[ng-class]="bean.comment ? 'style1' : 'style2'" - this is not working either.
Styleclass works only without a condition like so:
<p-overlayPanel [styleClass]="style1"> // html file
p-overlayPanel .style1.ui-overlay { background-color: yellow; } // css file
While [ng-class] doesn't work at all (but works fine on vanilla JS elements). Have I missed something? My questions are following:
Is 'ng-class' not working for some of the elements from ngPrime collection?
How to correctly conditionally apply 'styleClass' for p-overlayPanel element?
I'm using Angular 8.
styleClass accept string as a css class or list of classes and apply to the elemnt at that already have a list of these classes overlaypanel ui-widget ui-widget-content ui-corner-all ui-shadow
so if you want to change the background color you have to do it like this
.style1.ui-overlaypanel{
background-color: red;
}
.style2.ui-overlaypanel{
background-color: green;
}
you have to add the class to the global style file not the component style file and if you use style property the value will pass to ngStyle directive.
demo 🚀
🦑 overlaypanel.ts
Updated 🌟
you can use ngClass but the style must be change like the example below , because now the css classes will apply to the element directly.
.style1 .ui-overlaypanel{
background-color: red;
}
.style2 .ui-overlaypanel{
background-color: green;
}
demo 🥈
You can use [ngClass] like this:
<input pInputText [ngModel]="vendor.iban" name="pIban" #pIban="ngModel" (click)="some(pIban)" class="col-md-7 ui-inputtext ui-widget ui-state-default ui-corner-all " [ngClass]="{'errorVendor': vendor.iban=='' && pIban.touched}" />
Related
I have multiple css styles:
form#reply_form-c1r1.odgovor div#cmtforms-c1r1 input{color:red}
form#reply_form-c2r1.odgovor div#cmtforms-c2r1 input{color:red}
form#reply_form-c3r1.odgovor div#cmtforms-c3r1 input{color:red}
form#reply_form-c4r1.odgovor div#cmtforms-c4r1 input{color:red}
and I want to make the one css style like this
form[id^="reply_form-c"]r1.odgovor div[id^="cmtforms-c"]r1 input{color:red}
But this code, doesn't work..
What I missed?
Just give the elements a class and use that not all the id's etc. class="red-block" and then in CSS .red-block{color:red;}
Example:
.red-block {
color: red;
}
<div class="red-block">Howdy</div>
<span class="red-block">spanner</span>
<button type="button" class="red-block">Make me do it</button.
I'm trying to change the styles of a vuejs-datepicker (https://www.npmjs.com/package/vuejs-datepicker)
<datepicker
format="dd/MM/yyyy"
calendar-class="my_calendar"
input-class="textfield"
name="my_date" />
In the styles section I define this rule, but my datepicker doesn't change the width
.my_calendar {
width: 100px !important;
}
Any idea? Or other plugin for use a datepicker in vuejs?
Thanks
I have faced the same problem and the defaualt css does not works when it is scoped.Now,do the following steps to apply styling to Vuejs date picker and time picker
use input-class="--your--class--name--here " in the place of class
beneath your scoped style tag use another style tag which should not be scoped
`
<template>
<div>
<datepicker
v-model="startDate"
input-class ="my-picker-class"
placeholder="Start Date"
</datepicker>
</div>
</template>
<style>
.my-picker-class{
border: none !important;
border-bottom: 1px solid #F26F31 !important;
}
</style>
`
3. Here i have used my class name .my-picker-class and applied styling there , dont forget to give that "!important" at the end of the styling
Try /deep/ to change css property from parent :
/deep/ .className {
Css property
}
Try adding module style. You want to add styles to calendar-class. So try it this way:
<datepicker :class="$style.input" inputClass="input" />
<style module>
input {
width: 100%;
cursor: default;
}
</style>
Note: I was facing a similar issue with input class. This worked out for me.
CSS for vuejs datepicker can be passed as a prop. There are 3 props, wrapper-class, input-class and calendar class. For example
<datepicker input-class="rounded w-1/2" calendar-class="rounded"></datepicker>
Note: Tailwindcss classes used here.
I have three buttons. They have an animation when hovered over. I load my file with the ejs render engine. I want to have different animation colors for the three buttons, and set these dynamically when I send the html page.
I tried something like this:
<button class="button button--style" onclick="window.location.href='/location'" style=":after {background: <%= color %>;}">Button 1</button>
All the animation is defined throught button-style, I also define the after style there:
.button--style::after {
background: #f00;
}
How could I achieve this?
You'll have to use classes instead and set your classes in code behind. As mentioned, you can't use pseudo classes in a style tag;
<button class="button button--style" onclick="window.location.href='/location'" class="<%= class1variable %>">Button 1</button>
class1::after {
background-color: #F0F0F0;
}
class2::after {
background-color: #BLAH;
}
I have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.
Is there a CSS way to select an element that looks like that by class?
<a class="" href="...">
Like a selector for empty class declarations?
Provided the class attribute is present as you say you can use the attribute selector like this:
jsFiddle
<a class="" href="...">asd</a>
a[class=""] {
color: red;
}
If you want this to work when there is no class attribute present on the element you can use :not([class]).
jsFiddle
asd
a:not([class]) {
color: red;
}
These can then be combined together to handle both cases.
jsFiddle
asd
<a class="" href="...">asd</a>
a[class=""],
a:not([class]) {
color: red;
}
You can use element-attribute selector here with an empty class value
div[class=""] {
color: red;
}
Demo
Note: You can replace the div with required element