I want the textbox to be 6 column on screen greater than sm and 12 column for mobile.
I use the vuetify grid but it does not work as expected.
this is my code:
<v-card-text>
<v-layout warp>
<v-flex xs12 sm6 class="pa-1">
<v-text-field
ref="name"
v-model="password.name"
label="Name"
solo
placeholder="Full Name"
counter="25"
></v-text-field>
</v-flex>
<v-flex xs12 sm6 class="pa-1">
<v-combobox
v-model="password.keys"
label="Add keys"
chips
solo
multiple
>
<template slot="selection" slot-scope="data">
<v-chip :selected="data.selected" close #input="remove(data.item)">
<strong>{{ data.item}}</strong>
</v-chip>
</template>
</v-combobox>
</v-flex>
</v-layout>
In the mobile view, the elements are in the same row.
What can be the reason, and how can I fix it?
This is the mobile version:
You have a typo on the "v-layout" should be wrap not warp.
https://codesandbox.io/s/my49o8vo9y
Related
I have tried loads of different options with the following code, however, I can't get this to fill the remaining height. (The second layout should fill the remaining height) what am I doing wrong here?
<template>
<div class="earnIndex">
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex
v-for="(offer, index) in offers"
:key="index"
xs2
class="pa-1"
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card>
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
EDIT:
So here is my new code:
<template>
<v-layout column wrap>
<v-flex>
<v-layout row wrap class="red">
<v-flex
v-for="(offer, index) in offers"
:key="index"
class="pa-1"
xs2
>
<SiteButton
:site-name="offer.siteName"
/>
</v-flex>
</v-layout>
</v-flex>
<v-flex grow align-content-start>
<v-card height="100%">
<p>
test
</p>
</v-card>
</v-flex>
</v-layout>
</template>
This creates the following:
I would like the card with "test" to start straight after the links at the top, and then fill the rest of the height.
Thank you in advanced for your help!
Regards,
Josh
Try using column fill-height on the right side, and then grow on the v-flex...
<v-container fluid fill-height>
<v-layout row wrap>
<v-flex v-for="(offer, index) in offers" :key="index" xs2 class="pa-1">
<v-btn>{{ offer.siteName }}</v-btn>
</v-flex>
</v-layout>
<v-layout column fill-height>
<v-flex grow>
<v-card class="fill-height">
<p> test </p>
</v-card>
</v-flex>
</v-layout>
</v-container>
https://codeply.com/p/bwE5ifP4Pe
You don't need as much markup in your scenario and can cut this down to just a few lines.
I just filled in some numbers instead of your custom component in the v-for.
This will stretch the lower card to the maximum amount right after your for loop. The v-row and v-col is the way to go now in 2.0 (https://vuetifyjs.com/en/components/grids/).
<div class="d-flex fill-height" style="flex-direction:column">
<v-row class="blue">
<v-col cols="2" v-for="i in 15" :key="i" class="pa-1">
<v-btn>{{ i }}</v-btn>
</v-col>
</v-row>
<div class="fill-height" style="background-color: salmon">Down</div>
</div>
Codesandbox example
I want to add a tooltip over the info icon. I am not able to figure out how can I do that. Help me out.
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field required
label='Information'
v-model='demo.information'
:rules='nameRule'
append-icon="info">
</v-text-field>
</v-flex>
Update
<v-flex xs12 md6 class="add-col-padding-right">
<v-text-field required label='Information' v-model='demo.information' :rules='nameRule'>
<template slot="append-outer">
<v-tooltip right>
<template v-slot:activator="{on}">
<v-icon v-on="on">place</v-icon>
</template>
<span>tooltip!</span>
</v-tooltip>
</template>
</v-text-field>
</v-flex>
Since append-outer-slot does not exist yet in Vuetify 1.0.5, you'll need to use CSS/Vuetify's flex utility classes to place the icon afterward.
<v-flex xs12 md6 class="add-col-padding-right">
<div class="input-container d-flex align-center">
<v-text-field required label='Information' v-model='demo.information' :rules='nameRule'></v-text-field>
<v-tooltip right>
<v-icon slot="activator">info</v-icon>
<span>{{demo.information}}</span>
</v-tooltip>
</div>
</v-flex>
Here's a working example: https://codepen.io/Qumez/pen/WNvNgJP
I have a problem with the code shown below. I want it to be fixed, therefore filling the height and the width, eliminating the scrollbar if possible.
Here is code sample:
<template>
<div class="mt-10 pt-10">
<v-container fluid ma-0 pa-0 fill-height>
<v-layout row wrap class="ma-0 pa-0">
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card height="900" class="ma-0 pa-0" id="rounded-card">
<v-img
src="img.jpg"
height="100%"/>
</v-card>
</v-flex>
<v-flex class="xl6 md6 sm6 xs12 pa-0" absolute fixed>
<v-card class="ma-0 pa-0 elevation-5" height="900">
<item_att/>
<v-divider/>
<item_pro/>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I want my website to have similar layout to this page: https://nephos.cssninja.io/product.html
Here's my sample page: https://thestackoverflow.netlify.com/single
I am trying to implement vuetify v-list Avatar with 3 lines using the vuetifyhttps://vuetifyjs.com/en/components/lists#examples documentation. However the list is displayed but doesn't not cover the full width of the screen.
here is my code
<template>
<v-container fluid>
<v-layout row wrap>
<v-flex>
<v-list>
<template v-for="(item, index) in items">
<v-subheader
v-if="item.header"
id="item.header"
:key="item.header"
v-html="item.header"
></v-subheader>
<v-divider
v-else-if="item.divider"
:key="index"
:inset="item.inset"
></v-divider>
<v-list-item v-else :key="item.title" two-line>
<v-layout row wrap justify-space-between>
<v-flex xs12 md4>
<v-list-item-avatar>
<v-img :src="item.avatar"></v-img>
</v-list-item-avatar>
</v-flex>
<v-spacer />
<v-flex xs12 md8>
<v-list-item-content>
<v-list-item-title v-html="item.title"></v-list-item-title>
<v-list-item-subtitle
v-html="item.subtitle"
></v-list-item-subtitle>
</v-list-item-content>
</v-flex>
</v-layout>
</v-list-item>
</template>
</v-list>
</v-flex>
</v-layout>
</v-container>
</template>
here is how it looks now but i would like to increase the width to cover most of the screen if not all.
Checking out the codepen example [a link] (https://codepen.io/pen/?&editable=true&editors=101) on Vuetify for the Avatar with 3 lines
They have the width setup in their v-card
<v-card
max-width="450"
class="mx-auto"
>
You should have something like this above where you start your template, maybe right below where the app is started div id="app"
If you don't have anything like that, try putting it in the v-container
<v-container max-width="1080" fluid>
Hope that works!
I found the reason why it didn't work. In my index file (which is the parent file) in which I call the component that has this code, I had <v-layout column wrap> instead of <v-layout row wrap>.
<template>
<v-container class="mx-auto">
<v-layout column wrap>
<v-flex>
<MyProfile />
<Education :items="items" />
</v-flex>
</v-layout>
</v-container>
</template>
This caused the width to be small. Once I changed it to row, the width of the layout expanded.
I have been playing with vuetify, I've been trying to mimic a specific layout to see if I can do it and add tabs. So far, I've been able to center stuff but in a way that I view as weird. I want the h1 to be under the avatar.
I used v-spacer to center things and added tabs that are centered at the bottom
when I use v-slot it aligns everything in the middle.
If it's just the avatar it's perfect.
When I add an h1 under it does not go directly under.
I've been looking at the api and can't figure out.
Here's a link to the codepen https://codepen.io/sanwil9/pen/mYQaRx
<div id="app">
<v-app id="inspire">
<v-app-bar prominent extended
src="https://images3.alphacoders.com/114/114869.jpg"
dark
>
<v-spacer></v-spacer>
<v-avatar
size="90"
>
<img
src="https://media.licdn.com/dms/image/C5103AQHlAw-naKhLig/profile-displayphoto-shrink_100_100/0?e=1564617600&v=beta&t=xLgLkONVQpvaxUZfkcI3TYG9yoditHjjoWNbRUKHWqk"
alt="Avatar"
/>
</v-avatar>
<h1>Super Steve</h1>
<v-spacer></v-spacer>
<template v-slot:extension>
</template>
<template v-slot:extension>
<v-tabs centered>
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
<v-tab>Tab 3</v-tab>
</v-tabs>
</template>
</v-app-bar>
<v-content>
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs12>
<v-card dark color="primary">
<v-card-text class="px-0">12</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 2" :key="`6${i}`" xs6>
<v-card dark color="secondary">
<v-card-text class="px-0">6</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 3" :key="`4${i}`" xs4>
<v-card dark color="primary">
<v-card-text class="px-0">4</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 4" :key="`3${i}`" xs3>
<v-card dark color="secondary">
<v-card-text class="px-0">3</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 6" :key="`2${i}`" xs2>
<v-card dark color="primary">
<v-card-text class="px-0">2</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 12" :key="`1${i}`" xs1>
<v-card dark color="secondary">
<v-card-text class="px-0">1</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
Help me align the h1 under the gravatar. I want it to be aligned.
Within the <v-app-bar> you can include the following:
<v-container>
<v-layout row>
a spacer, the avatar, and another spacer
</v-layout>
<v-layout row>
a spacer, the <h1>, and another spacer
</v-layout>
</v-container>
the template for the extension
This will insert a grid which will allow you to turn the single container of default content into two separate rows.