I'm trying to keep the v-select menu attached to the v-select but in the meantime also have it over the dialog when open, in the bellow codepen you can see that the Age dropdown is hidden inside its container and I can't figure out how to make it visible
I have this hierarchy of v-dialog -> v-stepper -> v-select
<v-select
attach
:items="['0-17', '18-29', '30-54', '54+', '60', '77']"
label="Age*"
required
></v-select>
https://codepen.io/amaieras/pen/VwWRzpL?editors=101
P.S. I don't want to remove the attach, the client wants it to be glued to the v-select :)
Stepper component in vuetify has overflow: hidden style by default. You can change this property to visible in CSS:
.v-stepper,
.v-stepper__wrapper,
.v-stepper__items {
overflow: visible;
}
You can visit this codepen too.
Because Modal has a fixed size.
And your v-select is almost at the bottom of modal.
If you move that field to top or middle, it will work for you.
Or you can make modal height larger than now.
Please add this css.
.v-menu__content .theme--light .menuable__content__active {
position: initial !important;
}
this will work for you.
Related
I have svg icons that are conditionally rendered on vue component. The idea is to change the colour of the icon when the mouse hover over the icon, the icons are exactly the same except for colour.
I have built vue3 SPA project with cli, both svg icons are stored in assets folder of the src file.
Here is the code for conditionally rendering icons.
<div
class="icons"
v-on:mouseover="hoverMenu = true"
v-on:mouseout="hoverMenu = false"
>
<img
v-if="!hoverMenu"
title="Menu"
src="../assets/help_outline_24px.svg"
alt="icon"
/>
<img
v-else-if="hoverMenu"
title="Menu"
src="../assets/help_24px.svg"
alt="icon"
/>
</div>
Data binding
export default {
data: function () {
return {
hoverMenu: null,
}
},
}
The code runs and the icons change when hover over icons however the are two issues.
The first time user hover over the icon it takes longer to load the icon, there is a split or few seconds before the icon changes, by that time it is substituted by alt element text.
Sometimes the icons don't change when the mouse hover over icons repeatedly, e.g when mouse hover over icon it changes then it does't change back when mouse is out of icon as if the condition has not changed at all.
Please assist with the issues above, I'm still new to front-end and vue.
Thanks in advance.
I'm trying to create an alert component in VueJS/nuxtjs that will model the behavior of a snackbar (in this case fixed-bottom position, where it is fixed at the bottom when we scroll, so we see the alert as we're scrolling.)
For some reason I couldn't find much documentation on it. I've gone thru the alert component API on vuetify, and compared it to the snackbar component, but still can't seem to figure out why it's not working.
I've tried changing the position to absolute and it works, but for some reason instead of being fixed-bottom as the page scrolls it's literally fixed at the bottom and the user can't see the alert until they scroll down to the end of the page... when I use a snackbar component it works just fine, but I like the icon that alert comes with, hence the reason for using that component instead. I'll attach the code for the alert, as well as its parent component:
parent:
<div class="help-center-page max-w-none">
alert component:
<div class="text-center">
<v-alert :dismissible="true" prominent type="error">
This is an alert.
</v-alert>
</div>
The following CSS in the <style> section worked for me:
.v-alert {
position: fixed;
left: 50%;
bottom: 50px;
transform: translate(-50%, -50%);
margin: 0 auto; // Without this the box extends the width of the page
}
I'm trying to use the Vue transitions located on the vue docs (specifically the "Slide Fade") in order to animate the changing of text on a component. I have this particular tag set to render when a watched computed property returns from a vuex store. In order to transition the text through the various options, i have a recursive timeout function that sets the "showAnnouncement" property to false, sets the new text, then makes it true again. This works perfectly with or without the transition.
Here is a snippet from my template, showing it in action.
<div class="announcements">
<h2> Announcements </h2>
<transition name="slide-fade">
<h3 v-if="showAnnouncement">
<a :href="announcementCurrent.link" class="announcementLink">
{{announcementCurrent.title}}
</a>
- {{announcementCurrent.author}}
</h3>
</transition>
<!-- -->
</div>
One of the troubleshooting steps I took was to completely forgo the vue transition component, and set CSS transitions directly on the class. Which failed, so I've decided to go back to square one with vue transitions.
Here is the CSS for the transition, pulled directly from the documentation I've linked above:
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
Sorry in advance if the spacing is a little off, it didn't seem to want to paste indented properly.
I'm a bit at a loss right now, and thank you in advance for your help.
P.S. I should also mention, that this project uses Vuetify, I don't think it would affect anything, but it might be good to know.
Is it possible to remove dropdown arrow from md-select component of Vue Material?
i.e.to make it from this:
To this:
Suppose the class of your md-select is md1, then the arrow is a descendant of md-select you can do the following in your css file:
md1 .md-select-icon {
display: none;
// rest of your style below
}
I need to use v-carousel without the bottom control panel. It's useless when number of images more than 20. Is it possible to hide it?
You just need to add the hide-delimiters prop. You can find all carousel props here: VuetifyJS API
<v-carousel hide-delimiters>
[...]
You can do that with css:
.carousel .carousel__controls { display: none; }