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 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;
}
Is there a way to set a css selector's style to be the same as another selector (class in this case) that was earlier defined without javascript?
specifically, my problem is applying bootstrap button classes (btn-small, btn-mini) to different buttons without changing it manually. The reason is that I am replacing the buttons with javascript and since I don't want to rewrite a lot of the code, I want the class to be exterior from the html
so instead of having
<div class="mini">
<a class="btn btn-mini"> some_link </a>
</div>
and
<div class="small">
<a class="btn btn-small"> the_same_some_link </a>
</div>
I could do
<div class="link small">
<a class="btn"> the_same_some_link </a>
</div>
and using css do
.small a{
import .btn-small
}
.mini a{
import .btn-mini
}
could this be achieved with css or scss/sass?
You can do this with Sass by using selector inheritance via #extend.
A solution with SCSS:
.small a{
#extend .btn-small;
}
.mini a {
#extend .btn-mini;
}
Edit: as noted in the comments, you also need to:
#import "twitter/bootstrap"
There is a good example about using css nth-of-type selector http://codepen.io/mnafricano/pen/ltKvy, but when I run the example myself, I can't make it work. Can somebody point out what goes wrong in using the nth-of-type
The html is
<h1 class='logo'>Google</h1>
, and css is
h1.logo span:nth-of-type(1){
color:#0089ab;
}
h1.logo span:nth-of-type(2){
color:#d91821;
}
h1.logo span:nth-of-type(3){
color:#ffac05;
}
h1.logo span:nth-of-type(4){
color:#0089ab;
}
h1.logo span:nth-of-type(5){
color:#88c406;
}
h1.logo span:nth-of-type(6){
color:#d91821;
}
The CSS here works, the trick is that there is some Javascript on that page which adds a <span> wrapper around each of the letters in "Google".
The CSS specifically is looking for the nth span inside of the h1 with class "logo".
If you directly take the HTML and CSS, but not the JS the CSS rules will never match.
If you inspect the h1, you'll see the following:
<h1 class="logo">
<span class="char1">G</span>
<span class="char2">o</span>
<span class="char3">o</span>
<span class="char4">g</span>
<span class="char5">l</span>
<span class="char6">e</span>
</h1>
If you try that HTML instead, it should work as you expect.
Here's a JSFiddle that may help.
Using the markup below, the button text is underlined when hovered over. How can I get rid of that behavior?
Is there a better way to add links to a btn-group in bootstrap that avoids this behavior?
<a href="#">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
Tested CSS lines:
a:hover .btn-group { text-decoration: none }
a .btn-group:hover { text-decoration: none }
a:hover .btn-group .btn { text-decoration: none }
a .btn-group .btn:hover { text-decoration: none }
Any additional !important does not work, either (suggested by baptme).
Bootstrap 4+
This is now easy to do in Bootstrap 4+
<a href="#" class="text-decoration-none">
<!-- That is all -->
</a>
{ text-decoration: none !important}
EDIT 1:
For you example only a{text-decoration: none} will works
You can use a class not to interfere with the default behaviour of <a> tags.
<a href="#" class="nounderline">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
CSS:
.nounderline {
text-decoration: none !important
}
Buttons with the btn class do not have underlines unless you are doing something wrong: In this case nesting <button> inside of <a>†.
Something that I think you might be trying to do, is to create a bootstrap button without any decorations (underline, outline, button borders, etc). In other words, if your anchor is not a hyperlink, it is semantically a button.
Bootstrap's existing btn class appears to be the correct way to remove underline decorations from anchor buttons:
Use the button classes on an <a>, <button>, or <input> element
EDIT: Hitesh points out that btn will give you a shadow on :active. Thanks! I have modified my first example to use btn-link and incorporated the accepted answer's text-decoration: none to avoid this problem. Note that nesting a button inside of an anchor remains malformed html†, a point which isn't addressed by any of the other answers.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div>
<!-- use anchors for borderless buttons -->
Text
Text
</div>
Alternatively, for a regular button group using anchors:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<div class="btn-group">
<!-- use anchors for borderless buttons -->
Text
Text
</div>
In other words, it should not be necessary to introduce your own nounderline class and/or custom styling as the other answers suggest. However, be aware of certain subtleties.
†According to the HTML5 spec, <a><button>..</button></a> is illegal:
Content model:
Transparent, but there must be no interactive content descendant.
...
Interactive content is content that is specifically intended for user interaction.
a, audio (if the controls attribute is present), button, embed, iframe, img (if the usemap attribute is present), input (if the type attribute is not in the hidden state), keygen, label, object (if the usemap attribute is present), select, textarea, video (if the controls attribute is present)
P.S. If, conversely, you wanted a button that has underline decorations, you might have used btn-link. However, that should be rare - this is almost always just an anchor instead of a button!
Why not just apply nav-link class?
<a href="#" class="nav-link">
a.btn {
text-decoration: none;
}
The problem is that you're targeting the button, but it's the A Tag that causes the text-decoration: underline. So if you target the A tag then it should work.
a:hover, a:focus { text-decoration: none;}
If you are using Less or Sass with your project, you can define the link-hover-decoration variable (which is underline by default) and you're all set.
a:hover, /* OPTIONAL*/
a:visited,
a:focus
{text-decoration: none !important;}
Easy way to remove the underline from the anchor tag if you use bootstrap.
for my case, I used to like this;
<a href="#first1" class=" nav-link">
<button type="button" class="btn btn-warning btn-lg btn-block">
Reserve Table
</button>
</a>
add the Bootstrap class text-decoration-none to your anchor tags
<a href="#" class="text-decoration-none">
<div class="btn-group">
<button class="btn">Text</button>
<button class="btn">Text</button>
</div>
</a>
a:hover{text-decoration: underline !important}
a{text-decoration: none !important}
.btn is the best way, in modern website, it's not good while using anchor element without href so make the anchor tag to button is better.
just use bootstrap class "btn" in the link it will remove underline on hover
Add this css code to your css file:
a.btn { text-decoration: none !important; }
Use the a tag:
Login