Similar to the classic bootstrap disabled state -
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
I'd like to simulate a disabled state on an Angular Materials svg icon using cursor: not-allowed css. But I want to disable the click event.
.toolbar-icon-disabled {
fill: gray;
cursor: not-allowed;
pointer-events: none;
}
<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon>
Problem here is that I CANNOT use both not-allowed and pointer-events: none, as they appear to be mutually exclusive.
ex/ Here you can see that my left-most icon appears disabled, as the fill color is gray; however, it's still clickable if I add cursor: not-allowed.
I couldn't copy/paste the not-allowed circle from my screen, but here's an example:
Suggested work around:
1) Put the mat-icon in another anchor tag and add curson not allowed to that anchor.
HTML:
<a [class.linkDisabled]="true"><mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="true"></mat-icon></a>
CSS:
.toolbar-icon-disabled {pointer-events: none;}
.linkDisabled {cursor: not-allowed;}
2) keep the 'cursor: not-allowed;' in the css and i am assuming that there will be an event listener on the icon to do some action. Go into that method, check for the disabled condition and return if true. For example:
html:
<mat-icon svgIcon="historical-compare" [class.toolbar-icon-disabled]="flgDisabled" (click)="onClick()"></mat-icon>
method:
onClick() {
if(this.flgDisabled) {
return
}
console.log('called');
}
Related
I'm struggling with main navigation button menu hover color when working with official freelancer template:
https://github.com/BlackrockDigital/startbootstrap-freelancer
https://blackrockdigital.github.io/startbootstrap-freelancer/
Main button appears on narrower screens and should have the same hover color #128f76 like Send button from contact form on page bottom but it's blue #0062cc.
It seems that style responsible for this behavior is:
button.bg-primary:focus, button.bg-primary:hover
and is not overriden by styles specified in custom freelancer.css.
the style of the menu button on mobile devices is
a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
background-color: #0062cc !important;
}
this style is in the bootstrap.css file.
you should override this bg color by add this code to your CSS file
I was able to fix it by changing following files (making as little as possible changes)
index.html - remove bg_primary class, add btn btn-primary classes to Menu button
from
<button class="navbar-toggler navbar-toggler-right text-uppercase bg-primary text-white rounded"
to
<button class="navbar-toggler navbar-toggler-right text-uppercase btn btn-primary text-white rounded"
freelancer.css - remove btn class, add missing important! to btn-primary selectors
from
.btn {
border-width: 2px;
}
...
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #128f76;
border-color: #128f76;
}
to
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
background-color: #128f76 !important;
border-color: #128f76 !important;
}
I have added two button in modal window in which one button is highlighted but when-ever i am going to click on screen it goes to normal.How can i make it stay highlighted.
I am using following code:
<button type="button" class="btn btn-default">New</button>
<button type="button" class="btn btn-default">Used</button>
<button type="button" class="btn btn-default" autofocus>Any</button>
So you want JSFiddle?
CSS
.active {
color: #F00;
}
JS
$('button').on('click', function() {
$('button').removeClass('active');
$(this).addClass('active');
}
HTML :
<button id="highlight" ..... ></button>
CSS :
#highlight, #highlight:hover, #highlight:active, #highlight:focus {
color://any-color;
// more css
}
NOTE : this is using the pseudo classes hover, focus and active, to keep the same style of the button unchanged when any event on the button occurs.
Try
var yourbuttons = document.getElementsByClassName('highlight-hover');
for (var i = yourbuttons.length - 1; i >= 0; i--) {
var currentbtn;
yourbuttons[i].onclick=function(){
if(currentbtn){
currentbtn.classList.remove("highlight");
}
this.classList.add("highlight");
currentbtn=this;
}
};
There's not really a css only method if you want the button to stay highlighted when you click another part of the screen. :active or :focus remove their styles when the element is not longer active or in focus
Here's a working version of what it seems you want because i'm bored at work https://jsfiddle.net/mksty8eq/
When you click on one button it stays highlighted until another button is clicked
First setting autofocus inside modal will not work always. You should set focus on button via javascript. Refer http://getbootstrap.com/javascript/#modals .
$('#myModal').on('shown.bs.modal', function () {
$('#button3').focus()
})
:focus and :active are pseudo-classes that allows us to define specific CSS rules depending on state of the element. In bootstrap .active and .focus classes has same CSS style as :focus and :active.
So add .active or .focus to the button that you want to highlight always.
<button type="button" class="btn btn-default active">Any</button>
I'm currently working on a web project and I changed the Bootstrap's primary button color to orange. Now almost all button states work fine: active state, hover state, etc - except the loading state.
Once it enters the loading state, it returns to its default color which is blue.
I was searching on how to do it but seems I can't seem to find it. Can anyone help me out with this or if this question already exists, please redirect me to it. Preferably, I'd like to do it without javascript. Thanks!
This one rather can't be done without using JavaScript.
First way, if you aren't afraid of JS: jsfiddle
HTML:
<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary">
Loading state
</button>
CSS:
.btn-primary,
.btn-primary:hover,
.btn-primary:active {
border: none;
margin: 5px;
background-color: #b2d025; /* here */
}
JS:
$("#btn1").click(function() {
var $btn = $(this);
$btn.button('loading');
$(this).css('background-color','#b2d025'); /* and here */
setTimeout(function () {
$btn.button('reset');
}, 1000);
});
Second way (less js, more css, using !important): jsfiddle
You can use Inline CSS
<button type="button" id="btn1" data-loading-text="Hm.." class="btn btn-primary" style="background-color:red">
Loading state
</button>
Note : This will gives your answer but hover and active effects will not work
Did you try using bootstrap's customize
I think they have an option for changing the color of primary button. Look for btn-primary-color
If you don't want to use javascript than you can try this..
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus:hover {
border: none;
background-color: #b2d025;
}
Hope this helps...
I have this button:
<input type="submit" value="#Translator.Translate("PAYOUT")"
class="btn-block secondary-button save-changes padding-8"
ng-disabled="PayoutEnabled==false" ng-click="PayOut()" />
But even when it's disabled it has the same class as it's enabled, just not clickable. I want to change background when it's disabled so that user can see that button, is disabled. How can I do that? Do I need some ng-disabled CSS class or there is some other way?
What Toress answered should work fine but you don't need the help of AngularJS here at all (a native implementation & usage is always best).
You can make use of CSS3 since you already have a class on it. Example:
input.save-changes {
/* some style when the element is active */
}
input.save-changes[disabled] {
/* styles when the element is disabled */
background-color: #ddd;
}
Edit: You can immediately test it on this page of StackOverflow. Just inspect the blue button element and put the disabled attribute and see it's CSS.
.save-changes {
background-color: red;
padding: 7px 13px;
color: white;
border: 1px solid red;
font-weight: bold;
}
.save-changes[disabled] {
background-color: #FF85A1
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-init="PayoutEnabled = true">
<a href="#" ng-click="PayoutEnabled = !PayoutEnabled">
{{PayoutEnabled ? 'Disable' : 'Enable'}} the below button</a>
<br>
<br>
<input class="save-changes" type="submit" value="PAYOUT" ng-disabled="PayoutEnabled == false" />
</div>
use ng-class
<input type="submit" value="#Translator.Translate("PAYOUT")" class="btn-block
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false"
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />
this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).
AngularJS adds pseudo-class disabled when ng-disabled is false so i think here is the simplest solution to refer to disabled button :
button:disabled {
color:#717782;
}
In case you are using Bootstrap and a more recent Angular version than AngularJs you can ovverride the default style adding this to the styles.css file
.btn.disabled, .btn:disabled {
opacity: .35 !important;
background-color: gray !important;
}
The higher the opacity the darker or more solid the color will be.
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