I am using Bootstrap Vue and I have a dropdown like so
<b-nav-item-dropdown right>
<b-dropdown-item class="company-menu-text" :to="{ name: 'locationlist' }" exact>Lokaliteter</b-dropdown-item>
<b-dropdown-item class="company-menu-text" #click="logout">Logg ut</b-dropdown-item>
</b-nav-item-dropdown>
where Vue Router nicely takes me to the locationlist when I click there as expected. Not so nice is that the active class is then assigned to the dropdown item. I would like this not to happen ever. The best I have been able to get is to limit it with exact. How can I make sure that the active class is NEVER assigned to this dropdown item?
Versions I'm using of the relevant packages:
"bootstrap": "4.1.1",
"bootstrap-vue": "2.0.0-rc.11",
"vue": "2.5.16",
"vue-router": "3.0.1",
The hack that got the look I wanted was to modify the dropdown-item CSS:
.dropdown-item.active, .dropdown-item:active {
color: #000000;
text-decoration: none;
background-color: #ffffff;
}
but I still think that there must be a solution so that I don't set links to active. Because I have links other places than just in this dropdown menu, and don't think writing a ton of CSS is the right answer.
Related
I have a project in vuejs which bootstrap is already installed. I am using html, css project and converting into vuejs which bootstrap classes are used. However, dropdown bootstrap classes are not working for example, the below classes are not adding Show class when its getting clicked and normal html file is showing show class.
dropdown-toggle
dropdown-menu
I have
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"#popperjs/core": "^2.11.5",
Can someone please suggest something?
Thanks
Use show or shown
The in Bootstrap-Vue doesn't have a click event, but it does emit a show event shortly before the dropdown appears, including when it's clicked.
It immediately follows.
<b-nav-item-dropdown #show="doSomething">
Your code:
<b-nav-item-dropdown text="nav_title" #show="doSomething">
<b-dropdown-item href="#">
a
</b-dropdown-item>
<b-dropdown-item href="#">
a
</b-dropdown-item>
</b-nav-item-dropdown>
methods: {
doSomething() {
console.log('shown');
}
}
(You didn't find information for it on Vue's site because they didn't make the library.)
You can see the issue I'm having here:
https://codepen.io/ryanrapini/pen/LYeWZKR?editors=1010
Essentially, I have several dialogs which I have contained into their own custom "vue components" i.e. order-dialog.vue. In an ideal world, I could simply include this <order-dialog> component wherever I need it, and it would render the activator button and then handle all of the dialog state inside the component, so the parent doesn't need to worry.
Unfortunately, if I do this in a v-card-actions section I get spacing issues. Is this a bug with Vuetify or am I doing something wrong?
I thought that by moving the activator out of the <v-dialog> tag it might fix the issue, but it still doesn't unless I break my component up into a v-dialog component and a separate activator, which means I now need to manage the state of the dialog in the parent.
Thanks for any help.
I don't think you are doing something wrong, and I'm not sure that it's a Vuetify bug.
This comes from CSS rule in Vuetify library:
.v-application--is-ltr .v-card__actions>.v-btn.v-btn+.v-btn {
margin-left: 8px;
}
I think the authors assumed that this block should contain only buttons. But in your case (in 2nd and 3rd approach) an output HTML looks like this:
<div class="v-card__actions">
<button class="v-btn ...">
...
</button>
<div class="v-dialog__container"><!----></div>
<button type="button" class="v-btn ...">
...
</button>
<button type="button" class="v-btn ...">
...
</button>
</div>
So v-dialog__container breaks this rule.
You can fix you issue, by example, with an additional rule:
.v-application--is-ltr .v-card__actions>.v-btn:not(:first-child) {
margin-left: 8px !important;
}
Or you can also apply helper classes (ml-2) into specific buttons.
I got some problems with overriding the CSS on slots inside an autocomplete.
I read this thread and tried multiple solutions, but none work that are feasible (since they globally change the style for vuetify components):
How to override vuetify styles?
How would I override the autocomplete styles? E.g right now my problem is that I'm adding an append-slot with a button inside the search field, but the padding of the text field pushes it too much to the left & no padding is applied on the bottom.
Some things I tried:
Creating a parent element with an ID and then manually trying to create a class for it.
Example:
#handlesearch > div > div > div.v-input__slot > div.v-select__slot > div {
margin-top: 4px !important;
}
<template id="handlesearch" slot="append">
<v-btn
>Sök</v-btn
>
</template>
If you inspect your html, you'll notice that adding ID on <template> is not working. If you move your id="handlesearch" to actual html element inside your slot, which is in this case v-btn.
<template slot="append">
<v-btn id="handlesearch">Sök</v-btn>
</template>
with next scoped style
<style scoped>
#handlesearch {
background: red;
}
</style>
Produces next result:
If I move id="handlesearch" to <template> as <template id="handlesearch"> style will not be applied since in my DOM there is no HTML element with that id.
Solution
Move your ID to actual element inside your slot, and add scoped style according to that.
I need to insert a clickable button inside v-text-field under label slot. Meaning that there will be label : " Start typing or Select Search Panel" where "Select Search Panel" will be a link or button.
I'm able to make it visible using the v-slot:label but the button is not clickable and onSearchPanelClicked in not triggered..
<v-text-field class="input-field" clearable prepend-inner-icon="search" solo >
<template v-slot:label class="linkLabel" v-on:click="onSearchPanelClicked">
Start typing or <v-btn v-on:click="onSearchPanelClicked" class="link" flat > Select Search Panel</v-btn>
</template>
</v-text-field>
Is there any way to transfer click event to the element ? If I start typing the label must disappear like it used to work on v-text-field.
Regards
Jan
You have to overwrite your input .v-label CSS rule pointer-events.
Vuetify sets the label inside a v-text-field like this:
.v-text-field .v-label {
pointer-events: none; // unclickable element
}
So changing it to auto will enable your button inside v-text-field label to become the target of pointer events, just be aware of deep selectors when working with scoped styles at your component.
.v-input.input-field .v-label {
pointer-events: auto;
}
/* or for scoped styles */
::v-deep .v-input.input-field .v-label {
pointer-events: auto;
}
In this example the rule is applied only to fields with your custom class .input-field, if you'd like to overwrite for all the v-text-fields just remove it from the CSS code.
I tried several ways to override bootstrap3 nav-pills active color via CSS but it seems the LESS takes priority. I tried also using !important on the relative CSS properties with no luck: the LESS always has priority.
The only way I found is to obviously recompile bootstrap with customized nav-pills colors, but I'd prefer to use CSS so I can rely on CDN.
Any hint?
The relative affix/scrollspy is working of course via:
<body data-spy="scroll">
...
<ul class="nav nav-pills nav-stacked affix-top hidden-print" data-toggle="affix" data-spy="affix">
Relative jsfiddle
Not sure what you did, but this code works:
.nav-pills > li.active > a {
background-color:red;
}
// This changes the color of the active
.nav-pills>li.active>a:hover {
background-color:red;
}
// This changes the color of the hovered pill