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;
}
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 have this textarea with a button, I want the border color to change when I click on the button, how can I achieve this?
As gil mentioned, you're probably looking for NgClass (since you mentioned css specifically in the tags). You can also do this with attribute binding. Here's an example that shows how you might do either:
// In your component
emphasize = false;
toggleEmphasize() {
this.emphasize = !this.emphasize;
}
/* In your styles */
.emphasize {
border: solid 1px red;
}
<!-- And finally your template -->
<button (click)="toggleEmphasize()">Click Me</button>
<!-- Using ngClass -->
<textarea [ngClass]="{ emphasize: emphasize }"></textarea>
<!-- Using attribute binding -->
<textarea [class.emphasize]="emphasize"></textarea>
Here's a stackblitz that provides a working example.
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}" />
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.
I have a ng-click assigned to an ionic item-divider as follows:
<div class="item item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>
When this gets clicked it goes grey momentarily. I would like a much more subtle effect. I want it to go slightly lighter in colour so am trying to change the opacity like this:
.item-divider{
background-color: #336688;
color: white;
}
.item-divider:active{
opacity: 0.8;
}
My CSS code seems to make no difference. Is there a way to override the default behaviour?
CSS Only
The easiest way to override it is to give it a custom class and use that as your CSS selector. Also, the item is getting the activated class added to it on click, so :active won't change anything. To override you need to do something like this:
HTML:
<div class="item item-divider custom-item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>
CSS:
.custom-item-divider.item-divider {
background-color: #336688;
color: white;
}
.custom-item-divider.item.activated {
background-color: #336688;
opacity: 0.8;
}
Codepen demo: http://codepen.io/brandyshea/pen/epEedW
Note: you could also use <ion-item> instead of using a <div> with the item class.
Sass
If you are using Sass, you can override the Sass variables directly:
$item-divider-bg
$item-divider-color
$item-default-active-bg
$item-default-active-border
See these variables here: https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L311
and here:
https://github.com/driftyco/ionic/blob/master/scss/_variables.scss#L372
You will want to override the variables in your own Sass file, not Ionic's Sass files directly.
Let me know if you have any questions!
<div class="item item-divider" ng-click="toggleShowingProfile()">
PROFILE
</div>