I'm new on vue.js and vuetify and i'm playing with vuetify grid exemple.
I'm trying to get the same size for cols-4 and cols-7 cards and cols-3 and cols-5 cards
what I have
expected
<div id="app"><v-app id="inspire">
<v-container class="grey lighten-5">
<v-row>
<v-col cols="12">
<v-card>
.col-12
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="4">
<v-card>
.col-4
</v-card>
</v-col>
<v-col cols="3">
<v-card>
.col-3
</v-card>
</v-col>
<v-col cols="5">
<v-card>
.col-5
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="7">
<v-row>
<v-col cols="12">
<v-card>
.col-12
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="7">
<v-card>
.col-7
</v-card>
</v-col>
<v-col cols="5">
<v-card>
.col-5
</v-card>
</v-col>
</v-row>
</v-col>
<v-col cols="5">
<v-card>
.col-5 Subsequent columns continue along the new line.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</v-card>
</v-col>
</v-row>
</v-container>
codepen : https://codepen.io/Biereblonde/pen/bGVPMKZ
thanks
Related
When I open popup, he don't have focus on. I need to press anything inside of window and after that my esc btn will work (for closing window). Any suggest how to focus on popup immediately after button open it?
<v-dialog #keydown.esc="cancel" v-model="show" persistent max-width="750px">
<v-card>
<v-card-title>
<span class="headline"> New Exclusion </span>
</v-card-title>
<v-card-text>
<v-form ref="form" v-model="valid">
<v-container fluid>
<v-row>
<v-col cols="12" md="5">
<v-switch
v-model="percentOrAmountSwitch"
:label="percentOrAmountLabel"
:color="colorTheme.toggle"
></v-switch>
</v-col>
<v-col cols="12" md="2"></v-col>
<v-col cols="12" md="5">
<v-checkbox
label="Expiration Date"
v-model="expDate"
v-on:change="hideShow"
>
</v-checkbox>
</v-col>
</v-row>
<v-row>
<v-col cols="12" md="5">
<v-text-field
v-model="percentOrAmount"
:label="percentOrAmountLabel"
dense
:rules="percentOrAmountRules"
required
:prefix="flatDollar"
:suffix="percentBased"
:color="colorTheme.textField"
></v-text-field>
</v-col>
<v-col cols="12" md="2"></v-col>
<v-col cols="12" md="5">
<input
type="date"
v-model="date"
v-if="expDate"
min="1960-01-01"
/>
</v-col>
</v-row>
<v-row>
You can create ref to some input field, for example text on the modal, then focus on that element in modal in the mounted hook and use $vm.nextTick() so that you're sure the element is present in the DOM:
mounted() {
this.$nextTick(() => this.$refs.text.focus());
}
When I test my app in mobile portrait mode it looks like this:
Mobile portrait
But I'm trying to make it look like this from Vuetify
In landscape its fantastic, portrait no luck. I'm using fluid and fill-height on the v-container but no luck.
I've also tried height="100vh" on the container but that also didn't work.
This is some sample code that's been simplified and it doesn't work either:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col cols="8">
<v-card
outlined
class="d-flex"
>
<v-text-field
color="#F03C99"
label="Email"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
></v-text-field>
</v-card>
</v-col>
</v-row>
</v-layout>
</v-container>
</template>
I'm starting to think that it might be that I'm using router-view this is what I have in my router
<template>
<v-app>
<router-view name="navigation" :key="$route.fullPath"></router-view>
<router-view class="fill-height" key="main"></router-view>
<router-view name="confirm"></router-view>
</v-app>
</template>
Here is my real code:
<template>
<v-container fluid fill-height>
<v-layout>
<v-row align="center" justify="center" class="mx-auto">
<v-col :cols="overallColumns">
<v-card
outlined
>
<v-row>
<v-col
:cols="accountForImage"
align="start"
>
<v-card-title>
<v-img src='small-bella-logo.png' max-height="41px" max-width="128px" contain></v-img>
</v-card-title>
<v-form>
<v-text-field
v-model="email"
color="#F03C99"
label="Email"
:rules="[rules.email]"
placeholder="Email for Your Showroom"
outlined
class="ml-4"
:class="marginRight"
:error-messages="errorMessage"
data-cy="login"
></v-text-field>
<v-text-field
v-model="password"
color="#F03C99"
label="Password"
placeholder="Enter your password"
outlined
class="ml-4"
:class="marginRight"
:append-icon="passwordVisible ? 'visibility' : 'visibility_off'"
:type="passwordVisible ? 'text' : 'password'"
#click:append="passwordVisible = !passwordVisible"
data-cy="password"
></v-text-field>
<v-row
class="mt-n5"
>
<v-col
:cols="stackColumns"
align="start">
<v-btn
color="#AF3482"
class="white--text ml-4"
data-cy="login-button"
#click="logInWithBella"
>LOGIN</v-btn>
</v-col>
<v-col
:cols="stackColumns"
:align="alignStackedColumnToEnd"
class="mt-2"
:class="marginLeftWhenStacked"
>
<h1
#click="forgotPassword"
class="caption font-weight-bold ml-4 pointer pink_text"
>FORGOT PASSWORD?</h1>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row
justify="space-between"
>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="start">
<v-btn
class="ml-4 white--text"
color="#3B5998"
#click="logInWithFacebook()"
medium>
LOGIN WITH FACEBOOK
</v-btn>
</v-col>
<v-col
:cols="columnsFiveAndTwelve"
:align="alignStackedColumnToCenter"
justify="end">
<v-btn
class="white--text"
:class="marginLeftAndNegativeLeft"
color="#DB4437"
#click="logInWithGoogle()"
medium
>
LOGIN WITH GOOGLE
</v-btn>
</v-col>
</v-row>
<v-row align="center" justify="center">
<v-col cols="12" align="center" justify="center">
<v-divider class="ml-4"></v-divider>
</v-col>
</v-row>
<v-row align="start" justify="center">
<v-col cols="12" align="start" justify="center">
<h1 class=" ml-4 font title font-weight-regular">
No Account?
</h1>
<v-btn
class="ml-4 white--text mt-2"
:class="marginBottom"
color="#AF3482"
block
#click="sendAndCreateToken"
>
SIGN UP AND CREATE SHOWROOM
</v-btn>
</v-col>
</v-row>
</v-form>
</v-col>
<v-col
cols="6"
align="center"
class=""
v-if="removeImage"
>
<v-img src="login.png" class="mt-10" max-height="519px" max-width="187px" contain></v-img>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<p>{{ $vuetify.breakpoint.name }}</p>
</v-layout>
</v-container>
</template>
How to have the following <v-col> all one below each other on mobile devices only ?
<v-container>
<v-row>
<v-col>A</v-col>
<v-col>B</v-col>
</v-row>
<v-row>
<v-col>C</v-col>
<v-col>D</v-col>
</v-row>
<v-container>
Just set value of the prop cols to span over the 12 columns.
<v-container>
<v-row>
<v-col cols="12" sm="6">A</v-col>
<v-col cols="12" sm="6">B</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6">C</v-col>
<v-col cols="12" sm="6">D</v-col>
</v-row>
<v-container>
The above code will display the columns on each other on mobile only.
From the sm breakpoint and up, each column will span over half of the viewport.
Demo on Codepen.
This is what it shows once on mobile viewport:
And if the viewport is wider than the mobile one, we get this:
I want to achieve the design show in the image below:
My current design:
My code is:
<v-card v-for="book in books" :key="book.id" class="mb-2" tile="">
<v-img :src="book.image" max-width="80"></v-img>
<v-card-title>{{ book.title }} </v-card-title>
<v-card-subtitle>{{ book.author }}</v-card-subtitle>
</v-card>
Use the grid row>cols ...
<v-card class="mb-2" tile="">
<v-row align="start">
<v-col class="shrink">
<v-img src="//placehold.it/80x120" max-width="80" class="ml-3"></v-img>
</v-col>
<v-col>
<v-card-title class="pa-0">Title</v-card-title>
<v-card-subtitle>Author</v-card-subtitle>
</v-col>
</v-row>
</v-card>
Demo: https://codeply.com/p/7aOBDcIOke
I'm trying to create a form where a button and a toggle are on same line. I have this code.
<template>
<v-container>
<v-row>
<codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
</v-row>
<v-row>
<v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
<v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
<v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
<v-switch v-model="cacheSwitch" :label="`Ignore Cache`"></v-switch>
</v-row>
</v-container>
</template>
But the elements are coming vertically instead of being arranged side by side. I want the submit button and ignore cache buttons side by side instead.
I have also tried setting them in multiple columns as shown below. But they are still one over the other. I've also tried setting cols="6" for both the columns, without any luck. Can someone help me display these side by side?
<template>
<v-container>
<v-row>
<codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
</v-row>
<v-row>
<v-col>
<v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
<v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
<v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
</v-col>
<v-col>
<v-switch v-model="cacheSwitch" :label="`Ignore Cache`"></v-switch>
</v-col>
</v-row>
</v-container>
</template>
I'm able to use <v-layout row wrap> and <v-flex> to get them onto one line. Here is the code.
<template>
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 sm12>
<codemirror v-model="code" ref="myCm" :options="cmOptions"></codemirror>
</v-flex>
</v-layout>
<v-layout row wrap>
<v-flex xs12 sm2>
<v-btn v-if="isQueryNotInProgress" v-on:click="onSubmit">Submit</v-btn>
<v-progress-circular v-if="!isQueryNotInProgress" indeterminate/>
<v-btn v-if="!isQueryNotInProgress" v-on:click="cancelQuery">Cancel</v-btn>
</v-flex>
<v-flex xs12 sm6>
<v-switch v-model="ignoreCache" :label="`Ignore Cache`"></v-switch>
</v-flex>
<v-flex xs12 sm4>
<v-btn v-on:click="onQuery1Click">Query 1</v-btn>
<v-btn v-on:click="onQuery2Click">Query 2</v-btn>
<v-btn v-on:click="onQuery3Click">Query 3</v-btn>
</v-flex>
</v-layout>
</v-container>
</template>
Here is the end result.
<v-row>
<v-col cols="auto">
<v-btn>Button 1</v-btn>
<v-btn>Button 2</v-btn>
<v-btn>Button 3</v-btn>
</v-col>
</v-row>
And as long as you have enough space you'll be fine.