I am using the Vuetify tooltip feature.
The span message appears like this as below(image 1). Here in the CSS I checked .tooltip__content {
position: absolute; }. So I changed it relative as .tooltip__content {position: relative;}. But now the issue I am facing is the icon keeps switching positions as in image 2 on hover over the icon. What did I do wrong?
<v-container fluid>
<v-layout row wrap>
<v-flex xs11 md6 class="add-col-padding-right">
<v-text-field
label='Demo'
v-model='dummy.info'
>
</v-text-field>
</v-flex>
<v-flex xs1 md6 class="add-col-padding-left">
<v-tooltip attach>
<a href='javascript:void(0);' slot="activator">
<i class="material-icons icon-black">
message
</i>
</a>
<span>Please enter the user information correctly.</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
Probably nothing wrong, Vue likely just has a CSS rule for on hover. Try adding your own to override it:
v-tooltip:hover {
position: relative;
}
Related
I have 2 button component and i want them to be in one single row
code :
<template v-slot:[`item.action`]="{ item }">
<v-btn depressed #click="view(item.book)" color="primary">View</v-btn>
<v-btn depressed #click="viewUpdate(item.book,item.id_book)" color="primary">Update</v-btn>
</template>
So how to make them into one single row?
You can use CSS flex-box features:
.flex {
display: flex;
}
<div class="flex">
<button>Button 1</button>
<button> Button 2</button>
</div>
i figure it out and here is the code :
<template v-slot:[`item.action`]="{ item }" >
<v-container grid-list-sm>
<v-layout row justify-space-around>
<v-flex md3>
<v-btn depressed #click="view(item.book)" color="primary">View</v-btn>
</v-flex>
<v-flex md3>
<v-btn depressed #click="viewUpdate(item.book,item.id_book)" color="primary">Update</v-btn>
</v-flex>
</v-layout>
</v-container>
</template>
I have this very simple chat app here:
It contains of a Header and then v-main. Inside v-main I first have a v-container containing a v-card. This v-card element has the Name as an title, then a v-list containing the messages, and finally, divided by an v-divider a simple v-form. The end of v-app also contains a v-footer.
Treeview:
v-app
v-app-bar
v-main
v-container
v-card
v-card-title
v-divider
v-list
v-divider
v-form
v-footer
Current code inside v-main->v-container:
The v-containersimply has the fluid property on it.
<template>
<v-card>
<!-- Card Title -->
<v-card-title>
{{ messageInfo.sender }}
</v-card-title>
<v-divider></v-divider>
<!-- Messages -->
<v-list
class="overflow-y-auto"
v-for="msg in $store.state.messages"
:key="msg.id"
>
<v-list-item>
<Message :message="msg" :isSender="isSender(msg)" />
</v-list-item>
</v-list>
<v-divider></v-divider>
<!-- Send Messages -->
<v-form v-model="valid" ref="form">
<v-container>
<v-row justify="center">
<v-col :cols="10">
<v-text-field
v-model="messageInfo.message"
:rules="messageRules"
:counter="maximumLength"
required
rounded
flat
background-color="primary"
color="tertiary"
#keydown.enter="validateAndSend"
></v-text-field>
</v-col>
<v-col :cols="1">
<v-btn
:disabled="!valid"
color="tertiary"
#click="validateAndSend"
icon
large
fab
>
<v-icon>mdi-message</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</v-card>
</template>
Question:
Can I maximize the height of the v-list-element, so that my v-form will always end right above the start of the v-footer, regardless of the contents of v-list? I don't have the height of v-list set yet (I think this is the problem, but unsure which height to choose).
I don't want there to be a huge gap between my "content" and the footer.
Also, when there are more messages than in the image, the v-list will simply list them (won't cut off), which then of course pushes down the v-form and the v-footer.
I am very unsure how to do this and couldn't really find anything on google or the vuetify website.
It is not important that the messages are wrapped in a v-list-component. I just need a way to scroll through messages, if necessary.
Additional information:
I am very new to vuetify and I am using nuxt.js (don't think that's important though).
Height of card:
This layout create scroll card for screen height. You need to set property fill-height for v-container.
Then you need to style card by position: absolute
<v-container fluid fill-height>
<v-card class="card">
...
</v-card>
</v-container>
Styles:
.card {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 14px;
}
Stretching list in card:
Now you need to stretch v-list. I moved v-for from v-list to v-list-item. Then I just added
d-flex and flex-column on v-card. Last step is stretch the list by mt-auto
<template>
<v-card class="card d-flex flex-column">
<!-- Card Title -->
<v-card-title>
{{ messageInfo.sender }}
</v-card-title>
<v-divider></v-divider>
<!-- Messages -->
<v-list class="overflow-y-auto mt-auto">
<v-list-item v-for="msg in messages" :key="msg.id">
<Message :message="msg" :isSender="isSender(msg)" />
</v-list-item>
</v-list>
<v-divider></v-divider>
<!-- Send Messages -->
<v-form ref="form">
<v-container>
<v-row justify="center">
<v-col :cols="10">
<v-text-field
v-model="messageInfo.message"
required
rounded
flat
background-color="primary"
color="tertiary"
/>
</v-col>
<v-col :cols="1">
<v-btn>
<v-icon>mdi-message</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</v-card>
</template>
Scrolling list from bottom to top (pure css):
You also need to reverse scroll for list. You can easily do it by pure css with transform: rotateX(180deg)
Template:
<v-list class="overflow-y-auto mt-auto scroll-container">
<v-list-item class="scroll-container-item" v-for="msg in messages" :key="msg.id">
...
</v-list-item>
</v-list>
Styles:
.scroll-container {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-ms-transform: rotateX(180deg); /* IE 9+ */
-o-transform: rotateX(180deg); /* Opera */
}
.scroll-container-item {
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-ms-transform: rotateX(180deg); /* IE 9+ */
-o-transform: rotateX(180deg); /* Opera */
}
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 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
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