I have 2 columns, 1 with a textarea. The code below gives me what I want except that my textarea is narrow. I want it to be the full width of the v-card. What am I missing?
See the example on codepen
<div id="app">
<v-app id="inspire">
<v-card>
<v-container fluid>
<v-layout row>
<v-flex md7>
<v-card dark color="green darken-2">
<textarea full-width rows=30 min-height=500 v-model="message">
</textarea>
</v-card>
</v-flex>
<v-flex md5 >
<v-card dark color="blue darken-2">
<pre v-highlightjs="sourcecode"><code class="html">{{message}}
</code></pre>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-app>
</div>
Props like full-width are implelemted by Vuetify components. <textarea> is HTML element, therefore it doesn't know about Vuetify 'magic' props.
<v-textarea> is what you are looking for.
https://vuetifyjs.com/en/components/textarea
Or you can use old-fasioned inline-style (quite not recommended if you can use the advantage of vuetfiy).
<textarea style="width:100%;"></textarea>
Related
I would like to have a container filling the height (screen height). In the center of that container I want to have a card with some text. The container itself should have a background image.
So the current code I'm using is
<div id="app">
<v-app id="inspire">
<v-content>
<v-container fluid fill-height>
<!--
<v-img
src="https://images.pexels.com/photos/18104/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
gradient="to top right, rgba(100,115,201,.5), rgba(25,32,72,.8)"
>
-->
<v-layout align-center justify-center>
<v-card flat color="transparent">
<v-card-title class="justify-center white--text display-2 font-weight-medium">
Title goes here
</v-card-title>
<v-card-subtitle class="text-center white--text display-1">
Subtitle goes here
</v-card-subtitle>
</v-card>
</v-layout>
<!-- </v-img> -->
</v-container>
<h1>header below screen height</h1>
</v-content>
</v-app>
</div>
if you comment in the image the HTML will break and the card is not centered anymore. I created a Codepen for reproduction
https://codepen.io/trilliogus/pen/oNjbQMK?editors=1010
Would someone mind helping me achieving the desired layout?
PEN LINK
Description: If you have a div with position:relative then all the child div's with position:absolute will be stacked with top:0;left:0;
<div id="app">
<v-app id="inspire" flex>
<v-content>
<v-container fluid class="ma-n1 pa-0">
<v-row no-gutters>
<v-col>
<div style="height:100vh;
position: relative;
overflow:hidden;"
>
<div style="position:absolute;height:100vh;width:100vw;">
<v-img
src="https://picsum.photos/800/800"
height="100vh"
aspect-ratio="1.7"
cover
></v-img>
</div>
<div style="position:absolute;height:100vh;width:100vw;">
<v-container fluid fill-height>
<v-row>
<v-col align="center">
<v-card flat color="transparent">
<v-card-title
class="justify-center
white--text
display-2 font-weight-medium"
>
Title goes here
</v-card-title>
<v-card-subtitle
class="text-center
white--text display-1">
Subtitle goes here
</v-card-subtitle>
</v-card>
<v-col>
</v-row>
</v-container>
</div>
</div>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</div>
I have a code pen inside this code pen I have vuetify 2.2.15.
I've used footer as follow:
<div id="app">
<v-app>
<v-content>
<v-container>
<v-card>
<v-card-text>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-content>
<v-footer>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-app>
</div>
In the real code running on the web, this footer is aligned at the absolute bottom. But in the code pen, the footer is NOT aligned at the absolute bottom, but just follow the previous component relatively.
Is there any missing stack I should have used? Thank you for your suggestion.
you should use absolute in your v-footer like:
<v-footer absolute>
<v-col class="text-center">
footer
</v-col>
</v-footer>
absolute prop applies position: absolute to the component.
also you should move </v-content> after your footer
your final code should be like:
<div id="app">
<v-app>
<v-content>
<v-navigation-drawer app></v-navigation-drawer>
<v-container>
<v-card
>
<v-card-text
>
Expected to align at bottom
</v-card-text>
</v-card>
</v-container>
<v-footer absolute>
<v-col
class="text-center"
>
footer
</v-col>
</v-footer>
</v-content>
</v-app>
</div>
I'm currently creating a grid-layout in Vuetify, but I got stuck. I'm making a card-layout containing images. Here is the example:
I've tried it with the following code, but then small cards on the right are not aligned due to the margins.
<v-container>
<v-row class="justify-center">
<v-col cols="6">
<v-hover v-slot:default="{ hover }">
<v-card
to="/pools"
:elevation="hover ? 12 : 2"
:class="{ 'on-hover': hover , 'overwrite-hover' : $vuetify.breakpoint.xsOnly}"
>
<v-img class="white--text" :src="images[0]">
<v-card-title class="white--text align-end fill-height headline">My Pools</v-card-title>
<template v-slot:placeholder>
<v-row class="fill-height" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</v-hover>
</v-col>
<v-col cols="2">
<v-card class="ma-2" light height="50%"></v-card>
<v-card class="ma-2" light height="50%"></v-card>
</v-col>
</v-row>
<v-row class="justify-center">
<v-col cols="8">
<v-card light height="120px"></v-card>
</v-col>
</v-row>
</v-container>
Does anyone have a suggestion, or maybe a similar example?
Thanks in advance!
Luckily you only need to make minor adjustments to the smaller cards on the right. Make use of flex and let flex do its magic :) It's basically telling the cards to grow to the maximum height available without clipping. Then add some margin in between the cards with the helper classes mb and mt.
<v-col cols="2" class="d-flex" style="flex-direction:column">
<v-card class="mb-1 flex-grow-1">
Upper card
</v-card>
<v-card class="mt-1 flex-grow-1">
Lower card
</v-card>
</v-col>
As a codesandbox. Check out the file "layout.vue" for the complete example.
I included Vuetify 2(latest) in my Vue project. I am trying to do some grids with cards inside of a container and it does apply container fluid behavior without including fluid.
Here is my App.vue
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
text
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
</v-app-bar>
<v-content>
<v-layout>
<v-container videos-content grid-list-md >
<v-layout wrap>
<v-flex v-for="video in videos" :key="video.id" xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title>{{video.title}}</v-card-title>
<v-card-text>{{video.description}}</v-card-text>
<v-card-actions>
<a target="_blank" :href="video.url">open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-layout>
</v-content>
</v-app>
</template>
In my opinion, the correct structure of vuetify layout is v-container >> v-layout >> v-flex
So maybe remove v-layout tag defined outside of v-container?
Though not quite sure what you meant by 'fluid behavior'...
It seems to be working fine, you just need to follow standard structure from vuetify documentation. I made a pen for you
<div id="app">
<v-app>
<template>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn>
<span class="mr-2">Latest Release</span>
</v-btn>
<v-container grid-list-md >
<v-layout wrap>
<v-flex xs12 sm6 md3>
<v-card max-width="344" class="mx-auto">
<v-card-title></v-card-title>
<v-card-text></v-card-text>
<v-card-actions>
<a>open in Youtube</a>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
</div>
Given I have a the following toolbar block
<v-toolbar
color="blue darken-1"
dark
app
clipped-left
fixed
>
<v-toolbar-title :style="$vuetify.breakpoint.smAndUp ? 'width: 300px; min-width: 250px' : 'min-width: 72px'" class="ml-0 pl-3">
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<span class="hidden-xs-only">eventzimmer</span>
</v-toolbar-title>
<v-text-field
light
solo
prepend-inner-icon="search"
placeholder="Search"
class="mt-2"
></v-text-field>
<div class="d-flex align-left ml-1">
<v-btn icon>
<v-icon>
location_on
</v-icon>
</v-btn>
<v-btn icon>
<v-icon>
date_range
</v-icon>
</v-btn>
</div>
</v-toolbar>
How would I be able to use the vuetify grid system to achieve horizontal grids?
Given that I use the grid example from the docs that would look like
<v-container fluid>
<v-layout row wrap>
<v-flex xs-8>
<v-text/>
</v-flex>
<v-flex xs-4>
<buttons/>
</v-flex>
</v-layout>
</v-container>
But unfortunately that looks mostly akward. The docs don't really flavour an example for horizontal alignment. Any example would very much appreciated!