How can I remove the black outline from my mat-menu-item?
Like this one.
<button mat-icon-button [matMenuTriggerFor]="menu4" style="margin-left:10px;" [disableRipple]="true">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu4="matMenu">
<button id="deactvateBtn" [disableRipple]="true" mat-menu-item>
<i [class]="!row['isActive'] ? 'fas fa-user-check' : 'fas fa-user-slash'"></i>
<span>{{ (!row['isActive'] ? 'Activate' : 'Deactivate') | titlecase }}</span>
</button>
</mat-menu>
I tried overriding the .mat-button-focus-overlay class with this:
.mat-button-focus-overlay {
background-color: whitesmoke!important;
}
But the outline is still there.
Other options I tried:
.mat-button-focus-overlay .cdk-program-focused {
background-color: transparent!important;
}
.mat-focus-indicator mat-menu-item ng-tns-c98-13 {
background-color: yellow!important;
}
Use ::ng-deep to re-style the mat buttons.
::ng-deep .mat-button-focus-overlay {
background-color: whitesmoke!important;
}
Use ::ng-deep to re-style the mat buttons.
::ng-deep .mat-button-focus-overlay {
border: none !important;
}
use this css, what you are trying to hide is not background but border color so you need to disable the border.
or try this css
::ng-deep .mat-button {
border: none !important;
}
I know it's late but in case someone else runs into this in the future, the class that I had to override was button:focus for .mat-menu-item and it was not the border but the outline that I had to get rid off, I added this to my css and it worked:
button.mat-menu-item:focus{
outline: none;
}
I know this is even later - but what worked for me today was
.mat-focus-indicator::before {
border: none;
}
in your global styles.css.
In chrome you can inspect the button and play around with the CSS. That's how I found it.
This is very very late but I think I found a solution that works for Angular 15 with all Angular Material components.
//In src/styles.scss
body {
--mat-focus-indicator-border-width: 0;
--mat-mdc-focus-indicator-border-width: 0;
}
Related
index.html:
<div>
<span>
<button disabled>
Button 1
</button>
<button>
Button 2
</button>
</span>
</div>
index.less:
:not(&[disabled]) button {
background-color: red;
}
This gives the below output. Both buttons are colored red but I am trying to target only button that is not disabled.
Is there a way to do this? I am specifically looking to target buttons that are not disabled.
Here is the jsfiddle : https://jsfiddle.net/6gqb19e3/36/
I am new to LESS and my syntax was wrong. After bit of trial and error, I came up with this:
button {
background-color: grey;
&:not([disabled]) {
background-color: green;
}
}
and it gives this output:
Here is the jsfiddle with: https://jsfiddle.net/6gqb19e3/81/
When I click on one link in the navbar I want my border bottom to keep displaying
There are two behaviours :
- On hover : display the border-bottom.
- When active on the link keep displaying the border-bottom (the user is active on the page).
I don't find how to do this, can someone help me ? thank you !
File scss -
a {
span {
padding-bottom: 5px;
}
}
a:nth-child(1) :hover {
border-bottom: 3px solid "blue";
}
a:nth-child(2) :hover {
border-bottom: 3px solid #8e1cfb;
}
react component navbar tsx file -
<div>
<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
<span>Link 1</span>
</Link>
{''}
<Link to={`${process.env.REACT_STATIC_PUBLIC_PATH}`}>
<span>Link 2</span>
</Link>
</div>
Just handle the active class in your css.For example .active {
color: white;
border-bottom: 3px solid #2196f3;
}
Since you're using react router Link, you'll get active class added by default when the route is active.
[Edit]: My solution below works fine but does not use the default 'active' class added by react router itself when you click on a Link. I played with it on This Stackblitz for react-router (You will need to update package and change Link to NavLink if you are using router v5) but couldn't make the active class work properly, the active class wasn't removed from the first Link, don't know why (But you can inspect the code and you'll see it is added to your other links).
Now, if you want, there is also a activeStyle you can use (Not recommanded, bleh).
Your links are all first child of a div so you could do :
const App = () => {
const setActiveLink = e => {
// easier for me, you can change with getElementById or getElementByClassName
const links = document.getElementsByTagName("a");
Array.from(links).forEach(el => el.classList.remove("active"));
e.target.classList.add("active");
};
return (
<div className="navbar">
<a href="#" onClick={setActiveLink}>
link 1
</a>
<a href="#" onClick={setActiveLink}>
link 2
</a>
<a href="#" onClick={setActiveLink}>
link 3
</a>
</div>
);
};
Adn in your css simply add :
div > a {
text-decoration: none;
padding: 5px;
}
div > a:hover{
border-bottom: 1px solid red;
}
.active {
border-bottom: 1px solid red;
}
Of course you have to adapt the the css tags I chose to match your code. Here the stackblitz for exemple : Example on Stackblitz
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');
}
I'm trying to apply a hover effect to all button tags that have the class dialog-btn. I've tried .dialog-btn:hover{background-color:gold} but that doesn't work. I've also tried other suggestions to similar questions but still no luck. Can someone please clarify how I can do this?
Neither of the two examples below works.
button.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
.dialog-btn:hover {
background-color: gold;
}
<div class="dialog-btns">
<button class="dialog-btn" id="yes">Ref Match</button>
<button class="dialog-btn" id="about">About</button>
</div>
EDIT 2:
#yes{
background-color:green;
}
#about{
background-color:purple;
}
The code above appears to overwrite the .dialog-btn:hover code above. Why is that?
Reading your comments, i guess you want to have gold color on all of your buttons if you hover over parrent element.
If it is the case, you can do that
.dialog-btns:hover .dialog-btn{
background-color: gold;
}
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.