I'm using vuetify and a v-btn-toggle. I'd like to have the buttons expand to 100% of the container they are in. I figure there's a way to do this using aspects of vuetify instead of custom css, but I can't figure it out if so. Is there a vuetify way to do this?
<v-btn-toggle v-model="type" mandatory tile color="primary">
<v-btn value="text">Note</v-btn>
<v-btn value="list">List</v-btn>
<v-btn value="upload">Upload</v-btn>
</v-btn-toggle>
Use d-flex
<v-btn-toggle v-model="type" mandatory tile color="primary" class="d-flex flex-row">
<v-btn value="text" class="flex-grow-1">Note</v-btn>
<v-btn value="list" class="flex-grow-1">List</v-btn>
<v-btn value="upload" class="flex-grow-1">Upload</v-btn>
</v-btn-toggle>
Related
I am having issues aligning things correctly inside my Vue app using Vuetify.
<v-card class="mx-auto">
<v-row>
<v-col
v-for="(item, i) in items"
:key="i"
align-end
justify-end
>
<v-btn class="btn">
<v-icon>{{ item.icon }}</v-icon>
<span class="ml-2">{{ item.text }}</span>
</v-btn>
</v-col>
</v-row>
...
I simply want to align it to the right.
The properties you've put on <v-col> don't exist (i.e. align-end and justify-end). They are properties on the <v-row> component (which is a flex container). You need to use classes instead.
Make sure to consult the API->props section on the Vuetify component page when choosing component properties.
Try
<v-col class="d-flex justify-end">
<v-btn>Button</v-btn>
</v-col>
Note that the alignment is dependent upon the width of v-col. If v-col is only as wide as the button, you'll need to set the width by using the cols="x" property.
Add direction: rtl to your v-btn, Here is codepen:
<template>
<v-btn class="btn rtl">
...
</v-btn>
</template>
<style>
.rtl { direction: rtl; }
</style>
I am trying to align button in my cards. I have a layout which contains 3 cards in a row. But, the problem is, when i add text in the card the position of the button changes in the specific card.
I have tried passing different props and tried using different classes. But it did not work for me
This is the code:
CardRenderer.vue:
<v-container grid-list-sm>
<v-layout wrap>
<v-flex xs12 sm4 v-for="(item, index) in renderData" v-bind:key="index">
<v-card hover height="100%" >
<v-img
class="white"
height="200px"
:src="item.icon"
>
<v-container >
<v-layout fill-height>
<v-flex xs12 align-end flexbox >
<!-- <span class="headline black--text">{{ item.name }}</span> -->
</v-flex>
</v-layout>
</v-container>
</v-img>
<v-card-title>
<div>
<p class="headline black--text">{{ item.name }}</p>
<!-- <span class="grey--text">Number 10</span><br> -->
<!-- <span>Whitehaven Beach</span><br> -->
<span>{{ item.description }}</span>
</div>
</v-card-title>
<v-card-actions>
<!-- <v-btn flat color="orange">Share</v-btn> -->
<v-btn :href="'/dashboard/'+item.name" color="primary">More!</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
This is how my layout looks right now.. Look at the button. I want them to be aligned irrespective of the text provided in the card.
Thanks
You can add classes d-flex flex-column on your v-card and add <v-spacer></v-spacer> before the card actions.
<v-card class="d-flex flex-column">
<v-card-title>
...
</v-card-title>
<v-spacer></v-spacer>
<v-card-actions>
...
</v-card-actions>
</v-card>
Just add an outer class to the card:
<v-card hover height="100%" class="card-outter">
and add card-actions class to v-card-actions
<v-card-actions class="card-actions">
css :
.card-outter {
padding-bottom: 50px;
}
.card-actions {
position: absolute;
bottom: 0;
}
Live example on codesandbox:
https://codesandbox.io/s/vue-template-jsodz?fontsize=14
Add a margin to the bottom of your card, and then position the buttons absolutely from the bottom (with a bit of a margin too).
I know this is old, but I had the same issue. Turs out the absolute position is available through props so you don't have to use inline styling or classes.
<v-card-actions>
<v-btn
absolute
bottom
left
>More!</v-btn>
</v-card-actions>
However, this did mess up the position on my tooltips - fyi.
I had the same problem with only one dialog, so I don't need absolute positioning - just to keep the buttons at the bottom of the card.
'Stead of messing with styles and positioning and stuff, simply insert an extra <v-card-text></v-card-text>, and Vue automatically adds the padding needed to push the buttons down.
Not the best practice, but it's quick and works all right, specially when you're using Vue's automatic styling and don't want to start applying random css.
<v-dialog v-model="dlgShow" max-width="290">
<v-card min-height="220"> //this causes the problems
<v-card-title>Confirmation required</v-card-title>
<v-card-text>Are you sure you want to delete this?</v-card-text>
<v-card-text></v-card-text> //and here's the fix
<v-card-actions>
<v-spacer></v-spacer>
<v-btn #click="dlgShow = false">No, cancel</v-btn>
<v-btn color="primary" #click="myFunc">Yes, delete</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
I use v-toolbar but when I scroll down it get disappears. Basically I want to a sticky header.
This is my code basically.
<div id="app">
<v-app>
<v-toolbar dense>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</v-app>
</div>
Edit: Vuetify version 1.5:
You just need to add fixed to your v-toolbar which fixes the position, So:
<v-toolbar dense fixed>
You can see the documentation here
Version 2.0.0
Change from vuetify version 1.5 :
v-app-bar: Brand new component that was created to better scope the functionality of v-toolbar. All existing scrolling techniques and app functionality from v-toolbar has been moved. New scrolling techniques such as collapsing bar, scroll shrink and more have been added.
<v-app-bar fixed> would fix the toolbar. Documentation
Try this code.
<v-app id="inspire">
<div
class="hide-overflow"
style="position: relative;"
>
<v-toolbar
color="teal lighten-3"
dark
scroll-off-screen
scroll-target="#scrolling-techniques"
dense
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
<main id="scrolling-techniques" class="scroll-y"
style="max-height: 625px;">
<h1 v-for="n in 20" :key="n">{{n}}</h1>
</main>
</div>
</v-app>
For those who just wants to have a sticky element either above or below,
you might want to try snackbars
<v-snackbar v-model="snackbar" timeout="-1" top app>
jojojojojo asdfjasldf
</v-snackbar>
I'm using vuetify to design a 'card' component.
I have a parent div with a child button. Now, when I click the button, the ripple effect on the div is triggered.
How can I fix this?
<template>
<div>
<v-card v-ripple="true">
<h3>
<v-card-title>{{ title }}</v-card-title>
</h3>
<v-layout row>
<v-flex grow>
<v-card-text>
{{ plaats }}
<br />
{{ sub_title }}
</v-card-text>
</v-flex>
<v-flex shrink>
<v-card-actions>
<v-btn small color="blue" fab>
<v-icon medium color="white">mdi-calendar</v-icon>
</v-btn>
<v-btn small color="green" fab>
<v-icon medium color="white">mdi-calendar-check</v-icon>
</v-btn>
<v-btn small color="red" fab>
<v-icon medium color="white">mdi-calendar-remove</v-icon>
</v-btn>
</v-card-actions>
</v-flex>
</v-layout>
</v-card>
</div>
</template>
The solution was indeed Event.stopPropagation but I had to add it to the mousedown action.
So #mousedown.stop and then add your function with #click.stop="null" as #Frank mentioned before.
Note #mousedown event will not fire on mobile, thus we also need to
add #touchstart.
Codepen
<v-list>
<v-list-tile :ripple="true" #click="">
<v-list-tile-action>
<v-btn
#click.stop=""
#mousedown.stop=""
#touchstart.stop=""
>Click</v-btn>
</v-list-tile-action>
<v-list-tile-content class="pl-5">
Click tile
</v-list-tile-content>
</v-list-tile>
</v-list>
You're looking for Event.stopPropagation. Add #click.stop="null" to your button(s). Of course you can/should replace null with your own method.
if your vuetify css is separate, not in your app.js,
the solution that worked for me is to put the app.js script outside the body, when it is inside the js loads first than the vuetify css.
<!-- ripple error occurs randomly -->
<script src="{{ URL::asset('js/vLib.js') }}" defer></script>
</body>
<!-- Should be outside the body -->
</body>
<script src="{{ URL::asset('js/vLib.js') }}" defer></script>
https://codepen.io/Adellii/pen/VBEQbo?&editors=101
The current code moves the buttons to the bottom when user clicks on yes in the radio button.How do I get the buttons fixed in the bottom?
<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card height="280">
<v-radio-group v-model="content">
<v-radio label="Yes" value="yes" name="yes"></v-radio>
<v-radio label="No" value="no" name="no"></v-radio>
</v-radio-group>
<div class="x" v-show="content === 'yes'">
<v-text-field label="Regular" placeholder="Placeholder"></v-text-field>
<v-text-field label="Regular" placeholder="Placeholder"></v-text-field>
</div>
<v-card-actions>
<v-btn flat color="orange">Share</v-btn>
<v-btn flat color="orange">Explore</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
Apparently there are no v-card component props to achieve this.
So just add some css:
.flexcard {
display: flex;
flex-direction: column;
}
<v-card class="flexcard">
Codepen
Note that this works in your provided example for placing buttons at the bottom. In case your CSS is different in your project I'm not sure what you would like to do with other elements inside card. So you might need to add something like <v-spacer></v-spacer> or class="grow" or class="shrink" to some elements inside v-card to fit your style.
Example with bigger v-card height