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>
Related
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>
I am using Vuetify 2 with Vue 2. Here is some code:
<template>
<v-container fluid outlined class = "pt-0 pl-0">
<v-row no-gutters>
<v-col>
<v-sheet id="card-1" elevation=0
class = "pt-1 pb-0 pl-0 ma-0 black md-2 rounded-0" max-width='500px' >
<v-card-text class="text-h4 yellow--text font-weight-medium pt-0 pb-0 ma-0">
Last Refresh:
</v-card-text>
<v-card-text class="text-h3 white--text pt-0 pb-2 ma-0">
{{lastrefresh}}
</v-card-text>
<v-btn
color="red"
dark
medium
class="mt-2 mr-4">
Refresh Data
</v-btn>
<v-btn
color="green"
dark
medium
class="mt-2 mr-4">
Select Date
</v-btn>
</v-sheet>
</v-col>
</v-row>
</v-container>
</template>
Here is what is produced:
What I need is for the red button to be immediately to the right of the text, with the green button to the right of the red button. Both buttons sharing the black background.
How can I achieve this?
you can achieve this by dividing row into col .
Here is my code :-
<v-row no-gutters class = "pt-1 pb-0 pl-0 ma-0 black">
<v-col>
<v-sheet id="card-1" elevation=0
max-width='500px' class = "pt-1 pb-0 pl-0 ma-0 black md-2 rounded-0" >
<v-card-text class="text-h4 yellow--text font-weight-medium pt-0 pb-0 ma-0">
Last Refresh:
</v-card-text>
<v-card-text class="text-h3 white--text pt-0 pb-2 ma-0">
{{lastrefresh}}
</v-card-text>
</v-col>
<v-col >
<v-btn
color="red"
dark
medium
class="mt-2 mr-4">
Refresh Data
</v-btn>
<v-btn
color="green"
dark
medium
class="mt-2 mr-4">
Select Date
</v-btn>
</v-sheet>
</v-col>
</v-row>
this is the link for codepen.
How do I get rid of the padding separating the toolbar from the content?
I would like to achieve the same result like the picture below
Expectation:
What I got:
This is my App.vue file
<v-app>
<app-navigation></app-navigation>
<v-main>
<v-content class="ma-0 pa-0">
<div class="d-flex flex-wrap justify-center" width="900">
<img src="https://picsum.photos/300/300"/>
<img src="https://picsum.photos/600/300"/>
<img src="https://picsum.photos/700/300"/>
<img src="https://picsum.photos/200/300"/>
<img src="https://picsum.photos/400/300"/>
<img src="https://picsum.photos/500/300"/>
</div>
</v-content>
</v-main>
</v-app>
And this is my AppNavigation file - basically, the toolbar component:
<v-toolbar color="transparent" flat>
<router-link to="/">
<v-toolbar-title class="pr-10"> {{ appTitle }} </v-toolbar-title>
</router-link>
<v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
<v-btn class="hidden-sm-and-down" text rounded to="/hello"> HELLO </v-btn>
<v-btn class="hidden-sm-and-down" text rounded to="/about"> About </v-btn>
<v-spacer class="hidden-sm-and-down" ></v-spacer>
<v-btn class="hidden-sm-and-down" outlined rounded to="/sign-up"> SIGN UP</v-btn>
<v-btn class="hidden-sm-and-down" outlined rounded to="/log-in"> LOG IN </v-btn>
</v-toolbar>
Add absolute and width="100%" to the <v-toolbar/>.
<v-toolbar flat color="transparent" absolute width="100%">
...
</v-toolbar>
Demo:
I am trying to get all of my links in three columns in my footer with the copyright line below that. However, my copyright line is showing up in a phantom fourth column and it overlaps the third column if the screen width gets too small. If I use the same layout in my content section, I get the three columns.
Here is my footer component:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-row justify="center">
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">Copyright 2020, </p>
</v-col>
</v-row>
</v-footer>
</div>
<template>
On a possibly related note, why do I have to wrap each button in a div with a my-? class to get the buttons to stack vertically.
Edit:
I am using Vuetify v2.2.11.
Here is a screenshot of what it is doing:
Here is what I want:
My buttons that are within the same column are showing up side/side unless I either wrap them in the my-? classed div or there is not enough room in the column to display them side/side. I would like them stacked on top of each other in every screen size. And of course I only want the three columns for my buttons
A v-row only works as expected if wrapped in a v-container.
Add a <v-container fluid> around your v-rows and it should work just fine. Fluid is described as "Removes viewport maximum-width size breakpoints", thus removing the horizontal padding.
The whole thing would look like this in the end:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-container fluid>
<v-row class="text-center">
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">
Copyright 2020,
</p>
</v-col>
</v-row>
</v-container>
</v-footer>
</div>
</template>
I am making a form in a dialog. I am trying to get a v-text-field occupy the full width of the container. But it is not occupying the full width.
I tried giving xs12 to lg12. I tried the directive full-width.
Here s my code:
<v-dialog v-model="dialog" max-width="878px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">
<span id="two">
<img id="plus" src="../assets/plus-symbol.svg">
<span id="addapp">Add Application</span>
</span>
</v-btn>
</template>
<v-card style="border-radius:20px 20px 0 0;">
<v-card-title>
<span class="headline" id="frmttl">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container fluid grid-list-md>
<v-layout row wrap style="margin-left:-600px; height: 314px; width:878px;">
<v-flex xs12 sm12 md12 lg12 xl12 >
<v-text-field v-model="editedItem.ApplicationName" single-line outline full-width placeholder="New Application Name"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions id="crdactns">
<v-spacer></v-spacer>
<v-btn id="closbtn" flat #click="close">Close</v-btn>
<v-btn id="savebtn" flat #click="save">{{ CreateOrSave }}</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
I expect the v-text-box to occupy the full width of the dialog. But actually it is only occupying about half the space on the left side.
Codepen : https://codepen.io/anon/pen/dLoNeO
remove "margin-left:-600px; height: 314px; width:878px; lines. will work fine. checked and working