In a Vue 2 SPA I use Vuetify. On the home page I have a carousel that auto cycles through 3 v-carousel-items. For the first cycle of the v-carousel the viewport jumps to the carousel on cycling. The desired behaviour is for the carousel to continue cycling but not to pull the viewport. Weirdly it happens in Chrome but not in Firefox. I found a similiar problem adressed in https://www.programmersought.com/article/15814769396/.
<v-carousel
progress
:progress-color="secondColorComputed"
interval=7000
cycle
height="750px"
class="mx-auto ; my-4 ;"
show-arrows-on-hover>
<v-carousel-item
transition="false"
reverse-transition="false">
<v-card width="90%" class="mx-auto ; black--text" shaped :color="colorComputed">
<v-card-title>Sub Seasonal Outlook</v-card-title>
<!-- <v-container fluid> -->
<v-row align="center" justify="center">
<v-card width="50%">
<v-img
alt="GIF 1"
class="shrink"
contain
src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/geps/ss-precip.png"
width="800"/>
</v-card>
<v-spacer></v-spacer>
<v-card width="50%">
<v-img
alt="GIF 2"
class="shrink"
contain
src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/geps/ss-temp.png"
width="800"/>
</v-card>
</v-row>
<!-- </v-container> -->
<v-btn :color="secondColorComputed" to="/forecasts/sub-seasonal-outlook">More</v-btn>
</v-card>
</v-carousel-item>
<v-carousel-item
transition="false"
reverse-transition="false">
<v-card width="90%" class="mx-auto ; black--text" shaped :color="colorComputed">
<v-card-title>Multi Model Ensemble 03H Continental USA</v-card-title>
<!-- <v-container fluid> -->
<v-row align="center" justify="center">
<v-spacer/>
<v-card width="75%">
<v-img
alt="GIF 1"
class="shrink"
contain
src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/mme-pm25-combined/conUS-pm25-03.png"
/>
</v-card>
<v-spacer/>
</v-row>
<!-- </v-container> -->
<v-btn :color="secondColorComputed" to="/forecasts/multi-model-ensemble">More</v-btn>
</v-card>
</v-carousel-item>
<v-carousel-item
transition="false"
reverse-transition="false">
<v-card width="90%" class="mx-auto ; black--text" shaped :color="colorComputed">
<v-card-title>Fire Weather Index 24H</v-card-title>
<!-- <v-container fluid> -->
<v-row align="center" justify="center">
<v-spacer/>
<v-card width="50%">
<v-img
alt="GIF 1"
class="shrink mr-2"
contain
src="https://hpfx.collab.science.gc.ca/~svfs000/na-vfsp-was/public/assets/fwi/fwi-24.png"
width="800"/>
</v-card>
<v-spacer/>
</v-row>
<!-- </v-container> -->
<v-btn :color="secondColorComputed" to="/forecasts/fire-weather-index">More</v-btn>
</v-card>
</v-carousel-item>
</v-carousel>
I'm not sure if it's exactly the same issue as what you're having, but I had a problem with the page jumping up to the carousel on slide change, and managed to get it to stop doing this by setting the wrapper to have no height. (I'm using the fade animations.)
.v-window__container {
height: 0;
}
Mine issue got resolved by replacing transition to fade transition.
<v-carousel :cycle="true" interval="3000">
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
fade
></v-carousel-item>
Related
I am trying to use Vuetify components to achieve an effect on some v-img thumbnails and I am failing to do so. My images are setup as follows:
<v-row class="fill-height pa-5"
align-content="center"
justify="center">
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc1"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc2"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc3"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
<v-col class="text-subtitle-1 text-center"
cols="12"
sm="3">
<v-card>
<v-img :src="item.docs.doc4"
aspect-ratio=".77"></v-img>
</v-card>
</v-col>
</v-row>
I have these aligned horizontally in a row with columns and I am trying to have it so that when i over over each v-img they dim separately and a white solid v-button will appear in the center which I will assign a link/text too. What is the best way to do this as the hover component seems to lack dimming properties.
I don't think you are going to get this straight out the box but you don't need to do much more to get the result you want.
Out-the-box...
Use the Hover component to trigger an event and use the slot (boolean) value to toggle CSS class(es).
Template
<v-hover v-slot="{ hover }">
<v-card :class="{ 'on-hover': hover }">
// ...
</v-card>
</v-hover>
Custom...
Then add some scoped styles. The following is just a quick example but you can style however you like.
Styles
.v-image {
transition: filter .4s ease-in-out;
}
.v-card:hover .v-image {
filter: brightness(25%);
}
Example: https://codepen.io/alexpetergill/pen/NWBadjV
Docs: https://vuetifyjs.com/en/components/hover/
API: https://vuetifyjs.com/en/api/v-hover/#slots
I need other components to take over the white space Click to see the image
You can try this code:
<div id="app">
<v-app id="inspire">
<div>
<v-card class="d-flex" color="grey lighten-2" flat height="100" tile>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
<v-card class="pa-2 ma-2 align-self-start" outlined tile>
Aligned start
</v-card>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
</v-card>
<v-card class="d-flex mb-6" color="grey lighten-2" flat height="100" tile>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
<v-card class="pa-2 ma-2 align-self-stretch" outlined tile>
Aligned stretch
</v-card>
<v-card class="pa-2 ma-2" outlined tile>
flex item
</v-card>
</v-card>
</div>
</v-app>
</div>
When using Vuetifies V-Window component I recognized that the left and right buttons are jumping when moving left or right.
Even on their examples it is the case: https://vuetifyjs.com/en/components/windows/#customized-arrows
Can anyone say how it can be fixed the best way for the "customized arrows" example?
You can set a height in v-windows component to solve it.
https://codepen.io/vinisalves/pen/yLVGVjZ?editors=1010
<div id="app">
<v-app id="inspire">
<v-card
color="black"
dark
flat
tile
>
<v-window v-model="onboarding" style="height: 200px"> <!-- here -->
<v-window-item
v-for="n in length"
:key="`card-${n}`"
>
<v-card
color="transparent"
height="200"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<v-card-text>
Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.
</v-card-text>
</v-row>
</v-card>
</v-window-item>
</v-window>
<v-card-actions class="justify-space-between">
<v-btn
text
#click="prev"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-item-group
v-model="onboarding"
class="text-center"
mandatory
>
<v-item
v-for="n in length"
:key="`btn-${n}`"
v-slot="{ active, toggle }"
>
<v-btn
:input-value="active"
icon
#click="toggle"
>
<v-icon>mdi-record</v-icon>
</v-btn>
</v-item>
</v-item-group>
<v-btn
text
#click="next"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
I'm trying to figure out how to horizontally align two v-col, one of this columns has a v-combobox:
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters>
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here there's the codepen
How can I align those two columns?
Add align prop to the row component with center as value :
<v-row no-gutters align="center">
In order to do that, you can add class="d-flex align-center" to the v-row
<div id="app">
<v-app>
<v-container class="indigo lighten-5">
<v-row no-gutters class="d-flex align-center">
<v-col cols="2">{{ o.id }} </v-col>
<v-col cols="10">
<v-combobox v-model="o.selected" :items="values" dense class="ml-auto"></v-combobox>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Here's the codepen
I would like to center the login, password and login blocks.
I want to center the different blocks but I do not know how to do it at this level.
I tried with v-flex and v-layout but it does not pass.
In the code I tried to center the first and second block with v-layout and v-flex but without satisfactory result.
<template>
<div>
<v-app-bar
color="teal accent-3"
dark
>
<v-spacer></v-spacer>
<v-flex xs="12"><p class="text-justify">Application de traitement des opérations</p></v-flex>
<v-menu
left
bottom
>
<v-list>
<v-list-item
v-for="n in 5"
:key="n"
#click="() => {}"
>
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<div>
<v-card
class="mx-auto"
height="100"
max-width="200"
outlined
color="orange lighten-2"
></v-card>
<v-card
class="mt-n12 mx-auto"
elevation="12"
height="400"
max-width="600"
>
<V-layout>
<v-flex xs="12">
<div class="text-xs-center">
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Solo"
placeholder="Login"
solo
></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-text-field
label="Solo"
placeholder="Mot de passe"
solo
></v-text-field>
</v-col>
</div>
<el-button type="primary" #click="dialogVisible = true" >Connexion</el-button>
<el-dialog
title="Verification de Connexion"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>Connexion reussi</span>
<span slot="footer" class="dialog-footer">
<el-button #click="dialogVisible = false">Annuler la connexion</el-button>
<el-button type="primary" #click="dialogVisible = false">Continuer</el-button>
</span>
</el-dialog>
</v-flex >
</V-layout>
</v-card>
</div>
</div>
</template>
There's a lot of ways to do this. You could use flex with display row, but it sounded like you tried that? If so you can also try setting these to display: block, and setting margin: auto.