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
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 have a vue.js application and I'm using vuetify. I have a table that looks like this:
When I shrink the width of the viewport, it ends up looking like this:
I don't like this view. I'd prefer to have the dropdown be shoved under the row description and have the checkboxes stay aligned with the ones on the other rows, like this:
The problem is that the order of items in each row goes as follows: description, dropdown (if applicable to row), checkbox 1, checbox 2, checkbox 3. The only way I can see the dropdown falling below the description is if it's put at the end of the row. But can that be done with CSS below certain screen widths?
Here is my code:
<v-card class="mb-3 px-3">
<v-card-title class="px-0">
<div class="headline">Items</div>
</v-card-title>
<v-container fluid pa-0>
<v-layout row wrap py-3>
<v-flex xs9 sm6 md9>
<v-label>Item</v-label>
</v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
</v-layout>
<v-divider></v-divider>
</v-container>
<v-form>
<v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
<v-container fluid pa-0>
<v-layout row wrap align-center style="min-height: 80px;">
<v-flex xs12 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
<v-flex md4 v-if="item.hasDropdown">
<v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
</v-flex>
<v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>
</v-layout>
</v-container>
<v-divider v-if="index < items.length - 1"></v-divider>
</v-card>
</v-form>
</v-card>
You'll note that I'm using vuetify's flex classes such as sm2, md1, sm2, etc. These are great for adjusting the number of columns on different screen sizes, but is there something similar in vuetify for determining different layouts based on different screen sizes?
You can utilize the order classes for this purpose. Just add order-lg/order-md etc according to your need. Here in your example i'm using order-md. Customize according to your needs. Here's how I have done it:
Instead of v-flex, you have to use v-col
for grid use md=9 style instead of md9
your page must have v-app at root level, otherwise this will not work.
.........................
<v-card class="mb-3 px-3">
<v-card-title class="px-0">
<div class="headline">Items</div>
</v-card-title>
<v-container fluid pa-0>
<v-layout row wrap py-3>
<v-flex xs9 sm6 md9>
<v-label>Item</v-label>
</v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
</v-layout>
<v-divider></v-divider>
</v-container>
<v-form>
<v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
<v-container fluid pa-0>
<v-layout row wrap align-center style="min-height: 80px;">
<v-col xs=12 sm=6 :md="item.hasDropdown ? '5' : '9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-col>
<v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-col>
<v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-col>
<v-col xs=4 sm=2 md=1 order-md="2"><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-col>
<v-col md=4 v-if="item.hasDropdown" order-md="1">
<v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
</v-col>
</v-layout>
</v-container>
<v-divider v-if="index < items.length - 1"></v-divider>
</v-card>
</v-form>
</v-card>
SOLUTION 2
Solution 1 is more like vuetifyish way to do the ordering. For plain css way:
<v-card class="mb-3 px-3">
<v-card-title class="px-0">
<div class="headline">Items</div>
</v-card-title>
<v-container fluid pa-0>
<v-layout row wrap py-3>
<v-flex xs9 sm6 md9>
<v-label>Item</v-label>
</v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 1</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 2</v-label></v-flex>
<v-flex sm2 md1 class="text-xs-center hidden-xs-only"><v-label>Col 3</v-label></v-flex>
</v-layout>
<v-divider></v-divider>
</v-container>
<v-form>
<v-card v-for="(item, index) in items" :key="index" :id="'index-' + index" flat>
<v-container fluid pa-0>
<v-layout row wrap align-center style="min-height: 80px;">
<v-flex xs12 sm6 :class="item.hasDropdown ? 'md5' : 'md9'"><p class="pt-3 pb-3 font-weight-medium">{{item.description}}</p></v-flex>
<v-flex md4 v-if="item.hasDropdown" class="v-select">
<v-select :items="dropdownOptions" v-model="dropdownSelection" outline label="dropdown" class="d-inline-block"></v-select>
</v-flex>
<v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 1:</label><v-checkbox v-model="item.col1" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 2:</label><v-checkbox v-model="item.col2" class="checkbox"></v-checkbox></v-flex>
<v-flex xs4 sm2 md1 class="v-chkbox"><label class="hidden-sm-and-up">Col 3:</label><v-checkbox v-model="item.col3" class="checkbox"></v-checkbox></v-flex>
</v-layout>
</v-container>
<v-divider v-if="index < items.length - 1"></v-divider>
</v-card>
</v-form>
</v-card>
And Here's the CSS:
.v-chkbox {
order: 1;
}
.v-select {
order: 2;
}
*Don't forget the media query which I didn't add.
** To know more about css ordering check the MDN and CSS Tricks link.
Cheers :)
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 am using Vue/Vuetify and need to add text to carousel slides for descriptions. I think placing the text above the delimiters and below the image is the best place for it. I'd rather not overlay the text on the image. Vuetify documentation doesn't give any examples for this. How can this be done?
You can make own carousel design inside of v-carousel-item tags, using vuetify elements to place text where you want. Example on cedepen
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap justify-center>
<v-flex xs6>
<v-carousel hide-delimiters>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
>
<v-img
:src="item.src"
class="fill-height"
>
<v-container
fill-height
fluid
pa-0 ma-0
>
<v-layout fill-height align-end>
<v-flex xs12>
<v-card color="red" class="pa-2" >
<span class="headline white--text" v-text="item.src"> </span>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-img>
</v-carousel-item>
</v-carousel>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
Updated
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap justify-center>
<v-flex xs6>
<v-carousel>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
>
<v-container
fill-height
fluid
pa-0 ma-0 pb-3
>
<v-layout fill-height align-end pb-4 mb-4>
<v-flex xs12>
<v-card color="red" class="pa-2">
<span class="headline white--text" v-text="item.src"> </span>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-carousel-item>
</v-carousel>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
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.