I've tried to remove the blue border which comes when focus the b-nav-item-dropdown in Vue bootstrap. Tried many example but didn't work. I've done as follows.
Vue template
<b-nav-item-dropdown class="nav-item dropdown nav-dropdown-custom" text="LANGUAGES">
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
CSS
.nav-dropdown-custom {
color: black !important;
opacity: 100%;
border-color: transparent;
}
.nav-dropdown-custom:focus {
outline: none !important;
box-shadow: none;
}
Still I get the border like,
Is there a possibility to remove this border from the drop down. Please suggest a fix for this.
Thanks
Try with Adding border:none or border:0 to class nav-item
.nav-item{
border : none !important;
}
!important keyword is used to overwrite the defined css
Try with adding border-0 to class name
<b-nav-item-dropdown class="nav-item dropdown nav-dropdown-custom border-0" text="LANGUAGES">
refernce : https://getbootstrap.com/docs/4.5/utilities/borders/
Related
Hi I have an accordion with Bootstrap 4 and Vuejs like this:
<div class="faq_accordion" role="tablist">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle.accordion-1 variant="secondary">¿Cómo se seleccionó los beneficiarios?</b-button>
</b-card-header>
<b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text>
<b-card-text>{{ text }}</b-card-text>
</b-card-body>
</b-collapse>
</b-card>
</div>
I added this to the css:
.faq_accordion .card-header {
background-color: #f1f1f180 !important;
background: transparent;
}
But it does not work the background does not take that color, how can I fix it? and how can I add the font size to the fonts? Thanks!
Sometimes in Vue you need to do it in the hard way with deep properties, change it in your CSS:
In Vue 2 (Boostrap Vue is based on this):
::v-deep .faq_accordion .card-header {
background-color: #f1f1f180 !important;
background: transparent;
}
In Vue 3:
:deep(.faq_accordion .card-header) {
background-color: #f1f1f180 !important;
background: transparent;
}
I hope it works for you.
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;
}
In my sidebar, there are some <router-link>and I want their style is to be different when they are active. I am using router active-class for the <router-link> but the other elements inside the router-link are not taking some css properties. Here is my <router-link> looks like;
<router-link tag="li" to="/dashboard" class="nav-item has-treeview" active-class="active">
<a class="nav-link" id="dashboard_tab">
<i class="sidebar-icons">dashboard</i>
<p class="sidebar-links" active-class="active-p">Dashboard</p>
</a>
</router-link>
And here is my .active class;
.active {
background-color: #FF7400;
border-color: #FF7400;
border-radius: 4px;
color: white;
}
Now when a specific link is clicked and active, I have orange background and some border around that router-link. But my problem is, I also want the color of the icon and the p element is to be white, but they are not being effected by the color: white; property. What am I missing? active-class is only working for the router-link element so I cannot use it in the i or p. What should i do?
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
I'm tring to change the color of the checkmark inside the ion-checkbox. The checkbox has a white background and the the checkmark is white Im tring to get the checkmark to be black not white. This is what I have so far
.checkbox-icon::before {
background-color: white !important;
}
.checkbox-icon::after {
color: black !important;
}
<ion-item ng-repeat="list in modal.item.modifier_lists | orderBy: 'ordinal'"
ng-if="list.modifier_options[0].name">
<div ng-if="list.modifier_options.length === 1"
class="row">
<div class="col">
<ion-checkbox ng-model="list.modifier_options[0].selected"
ng-checked="list.modifier_options[0].selected"
class="button-orange checkbox-stable">
<span class="pull-right">{{list.modifier_options[0].name}}</span>
</ion-checkbox>
</div>
</div>
</ion-item>
Some of the css- properties you can use to change the coloring of the <ion-checkbox> are
--checkmark-color: black;
--background-checked: white;
--border-color: black;
--border-color-checked: black;
You can find more information in the ion-checkbox documentation
I'm pretty sure you actually have to use border-color to adjust the checkmark color
So to clarify here is what you could do:
Inside your <ion-checkbox> add a custom class of your own custom-checkbox and then for that class do whats below:
.custom-checkbox .checkbox-icon:after {
border-color: //whatever you like it to be
}
That will change the color of the check mark when it is checked.