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>
Related
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.
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>
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.
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