Is it possible to align element on the same height as the v-card-title in the card component of vuetify?
Currentl when using class="float-right" the element goes to the right but it is line below the title. I would like for it to be at the same level.
Here is the codepen:
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<div id="app">
<v-app id="inspire">
<v-card
class="mx-auto"
width="400"
>
<!-- Top row -->
<v-card-title>Cafe Badilico</v-card-title>
<button class="float-right">click me</button>
<!-- End of top row -->
<!-- Put components here -->
<v-card-title >
News
</v-card-title>
<v-list-item dense
>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>Header</v-list-item-title>
<v-list-item-subtitle>Subheader</v-list-item-subtitle>
<v-list-item-subtitle>2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-card-title >
News
</v-card-title>
<v-list-item dense>
<v-list-item-avatar>
<v-avatar color="indigo" size="36">
<span class="white--text headline">36</span>
</v-avatar>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title >Header</v-list-item-title>
<v-list-item-subtitle >Subheader</v-list-item-subtitle>
<v-list-item-subtitle >2019-05-31</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-card>
</v-app>
</div>
You can move the button into the title and use the v-spacer component:
<v-card-title>
Cafe Badilico
<v-spacer></v-spacer>
<button>click me</button>
</v-card-title>
https://codepen.io/El_Matella/pen/mdJrKNE
If you don't want it to be part of the title component, you can also use a flex container:
<div class="d-flex align-center justify-space-between">
<v-card-title>
Cafe Badilico
</v-card-title>
<button>click me</button>
</div>
https://codepen.io/El_Matella/pen/ZEGpjEq
Related
I have a card that displays a "toolbar" whenever I hover over it
Reproduction link
<template>
<v-app>
<v-main>
<div class="py-12"></div>
<v-container>
<v-menu open-on-hover location="top" transition="slide-y-transition">
<template v-slot:activator="{ props }">
<v-card v-bind="props" variant="outlined">
<v-card-title>Card goes here</v-card-title>
</v-card>
</template>
<v-card variant="outlined" class="ml-4">
<v-card-actions>
<v-btn icon="mdi-link-variant-minus" size="small" color="error" />
<v-btn icon="mdi-arrow-expand" size="small" color="primary" class="ml-4" />
</v-card-actions>
</v-card>
</v-menu>
</v-container>
</v-main>
</v-app>
</template>
But this "toolbar" should not expand to full width. I want it to be like a tab, e.g.
Adding the d-inline-block helper class to v-card-actions or to its parent v-card didn't help. I'm basically looking for
<div style="background:red">I don't want this</div>
<div style="display: inline-block; background:red; margin-top: 24px">I want this</div>
width: fit-content; for the toolbar parent block might solve it.
I'm trying to build a simple page with Vuetify and Vue.
On this page, I will have a few cards too. So I need this card's width and height fixed.
I need these items inside of the v-card, also scrollable. How can I do that?
<v-container>
<v-col cols="12" sm="16" md="8" lg="4">
<v-card height="720px">
<v-card-title class="unselectable" primary-title>
Card Title
</v-card-title>
<v-spacer></v-spacer>
<v-card-text>
<v-container>
<v-row class="pa-2">
<v-col
v-for="(item, i) in items"
:key="i"
class="d-flex child-flex"
cols="6"
>
<v-card>
<v-img
:src="getImage(item)"
height="130px"
class="grey lighten-2"
>
<template v-slot:placeholder>
<v-row
class="fill-height ma-0"
align="center"
justify="center"
>
<v-progress-circular
indeterminate
color="grey lighten-5"
/>
</v-row>
</template>
</v-img>
<v-card-text class="unselectable text-center font-weight-bold">
{{ item.title }}
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
</v-container>
Try out to add the property overflow-y:auto to the card style like :
<v-card height="720px" style="overflow-y:auto">
I use DevExtreme with Vue.js
I am working on converting the Vuetify UI component to the DevExtreme UI component
I want to add a pop-up in the page, but the pop-up doesn't work normally.
A pop-up tag was created, but the content was empty inside the tag.
I tried many ways, but I couldn't find a solution. help me
This is tag state
<div data-app="true" class="v-application--is--ltr theme--light" id="app">
<div class="v-application--wrap"> ...page content... </div>
<!-- popup -->
<div>
<div class="dx-overlay dx-popup dx-widget dx-visibility-change-handler">
<div class="dx-overlay-content dx-popup-nomal" tabindex="0" style="width: 800px; height: 600px;">
<div class="dx-popup-content"></div>
</div>
</div>
</div>
</div>
This is code
<dx-popup v-model="isOpen" :visible="isOpen" :width="width" :height="height" :show-title="false" :show-close-button="false">
<div ref="dialog" class="u-dialog">
<u-layout height="*">
<u-layout ref="dialogTitle" class="u-dialog-header">
<div class="pa-0 text-right">
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen_exit</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="!isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent" #click="closeButtonClick()">
<v-icon color="white">close</v-icon>
</v-btn>
</div>
</u-layout>
<u-layout ref="dialogContent" height="*" class="u-dialog-content">
<component ref="comp" :is="loader" :param="paramData" :code-map="popup.codeMap" #resolve="resolve" #reject="reject"/>
</u-layout>
</u-layout>
</div>
</dx-popup>
I'm making a simple login and register page with VueJS and Vuetify for a personal project but I can't figure out how to horizontally center a v-card I'm using.
I've been looking for a way but the documentation didn't gave any answers and I couldn't find any questions over here so I decided to ask it. Here's my code:
<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<v-img
:src="require('../assets/logo.png')"
class="my-3"
contain
height="200"
/>
</v-col>
<v-col cols="12">
<h1 style="text-align:center">SelliBird</h1>
</v-col>
<v-container fluid>
<v-card style="max-width: 50%;" class="elevation-4 mx-auto" dark>
<v-card-text class="text-center">
<v-col class="mb-4">
<h4 style="text-align:center" v-if="options.isLoggingIn">Log in to your customer portal</h4>
<h4 style="text-align:center" v-else>Crate a new account</h4>
</v-col>
</v-card-text>
</v-card>
</v-container>
</v-row>
</v-container>
</template>
<script>
export default {
data(){
return{
options:{
isLoggingIn: true
}
}
}
}
</script>
And here's a picture of how it looks right now:
Just add margin: 0 auto to the style property of the v-card and that's it.
how can i center this edit icon even when one address string is longer than the other?
This is the column I'm having this problem
<el-table-column
prop="address"
label="Address">
<template slot-scope="scope">
{{scope.row.address}}
<el-button
type="primary"
icon="el-icon-edit"
circle
size="mini"
style="margin-left: 55px"
#click="open(scope.$index, scope.row)"
></el-button>
</template>
</el-table-column>
Here is the complete code:
https://jsfiddle.net/xhbzpvas/
<div style="display: flex">
<address style="flex-grow: 1"/>
<icon/>
</div>