On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="height: 50vh; width: 50vh"
>
The problem is a clash of z-index ranges. Vuetify uses z-index ranges 0-10 while leaflet uses the range 100-1100. Fortunately, the z-index of a child element is relative to the z-index of their parent.
I advice you to give l-map a z-index of 0 like this.
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="z-index: 0; height: 50vh; width: 50vh"
>
This will automatically bring your component in line with all of Vuetify z-indexes. In contrast, #bgsuello workaround requires that you modify the z-index of every Vuetify component that may conflict with the map, including other dialogs, menus, animations, tabs, toolbars, snackbars...
Edit: This is an outdated answer.
see #Javier answer below as pointed out by #ondrejsv on comment.
It does not work anymore at least in Vuetify 2.1.9 and Vue 2.6.x. The solution by Javier seems to work.
Increase the z-index style property of your dialog.
<v-dialog style="z-index:9999;"
... rest of your code ...
I find it quite practical to wrap the map in an image, like this
<v-img
height="100%"
width="100%">
<l-map>
...
</l-map>
</v-img>
This way there is no need to do anything with the z-index.
I am on Vue2.x + Vuetify + Vue2leaflet.
I tried many things and finally what worked for me was to cover the with a . My code reads as :
<v-lazy>
<v-img>
<l-map>
.... rest of the code
</l-map>
</v-img>
</v-lazy>
This takes inputs on v-lazy from https://medium.com/#elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472. v-img was suggested by geomuc in the above response.
Other options that I tried but failed were: this.map.invalidateSize(); , this.map.remove();, this.$nextTick(() => {...}, z-index.
Related
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 have a project that includes text fields, buttons and a certain form design. I'm using Vuetify to achieve this but there's one problem that I'm not sure how to handle: Vuetify components dimensions seemed not changable.
For example :
I want v-text-field, v-select and v-btn to have the same height and <v-select> to be a bit wide relative to the button.
Is there a way to achieve this in Vuetify ? Or is it handled by CSS superimposition ?
Here is one way, using flexbox to keep items in a row, with one child taking up all the remaining space. Flexbox has a nice ability to override the child width and give you predictable results.
<div style='display:flex'>
<div style='flex:0 0 auto'>Item 1</div>
<div style='flex:1; background-color: yellow'>Item 2</div>
<div style='flex:0 0 auto'>Item 3</div>
</div>
in terms of the height, there is a height property for inputs and button
checkout here : https://vuetifyjs.com/en/api/v-input/#props-height
I'm having problems in my vuetify project. I tried on the vuetify website and it turns out this problem also occurs. Look at this :
Reference : https://vuetifyjs.com/en/components/autocompletes#autocompletes
My component like this :
<div id="app">
<v-app id="inspire">
<div>
<v-autocomplete
label="Components"
:items="components"
></v-autocomplete>
</div>
</v-app>
</div>
Demo and full code : https://codepen.io/positivethinking639/pen/GRRLXXP?&editable=true&editors=101
You can try it on your mobile version. This makes me unable to do searching
How can I solve this problem?
I checked the docs&examples page for this component. It goes up because there is no enough space on the screen. It works the same in examples on their docs page. It seems to be its native normal behaviour. The css top property for .v-menu__content is recalculated (68px -> 12px) based on the available space. You could override styles for all/mobile dimensions like
.v-menu__content.theme--light.menuable__content__active.v-autocomplete__content {
top: 68px!important;
}
Although I personally wouldn't do that.
I beginner for Vue, and I trying make carousel via Vue.
I have the code: https://jsfiddle.net/z3m76w5r/4/ (example)
<style>
.switch-enter-active,
.switch-leave-active {
transition: all .5s ease-in-out;
}
.switch-enter {
left: 100%;
}
.switch-leave,
.switch-leave-to {
left: -100%;
}
</style>
<div id="banner">
<transition name="switch">
<banner class="content" v-bind:slide="currentSlide"></banner>
</transition>
<div>
I want animated my carousel. But my transition-vue don't work, despite I looked at the docs and manuals.
Reason why your transition using Vue build-in <transition> component doesn't work is because its designed to work when some element/component is entering or leaving the DOM in context of:
Conditional rendering (using v-if)
Conditional display (using v-show)
Dynamic components
Component root nodes
Your image element is not entering or leaving DOM. Its just there and you are changing it's attributes (like url etc. - which cannot be animated in any way).
For your transition to work you need at least 2 img tags to exist in the DOM during the transition - one that is leaving the DOM and one that is entering the DOM. Easiest way to do this is by using v-for with key and transition-group instead of just transition. You just change the index of image, v-for will create new img element, apply "enter" transition to it and "leave" transition to old img element (for previous index)
You can find great example of that here
I want to limit viewport, where the nodes can be dragged and displayed to full hd resolution (1920×1080 px). Is it possible with cy.resize() function? I've tried to set cy.resize({width: 1920px, height: 1080px}), but it doesn't work.
Use CSS on your container.
If you read the docs for cy.resize(), you'll notice it just syncs with CSS changes.
You can use custom CSS also when you add graphs in HTML.
Like
<div class="col" [hidden]="noGraph">
<div id="cy" class="bg-white graph-dynamic-height"></div>
</div>
and in CSS
.graph-dynamic-height {
height: calc(100vh - 215px);
}
The above code work for me.