I'm creating app in Vue.js with Vuetify library. In app I am dispalaying v-cards, whose titles are of different length. My problem is that I want to display the all title in as many lines as needed. Instead, the title breaks off and there are "..." and only one line. How to change it?
Template:
<v-card max-width="900" class="mb-6">
<v-toolbar flat color="grey darken-2" dark>
<v-toolbar-title align="left">
{{ labels[0].key }}
</v-toolbar-title>
</v-toolbar>
<v-card-text>
<v-text-field
color="grey"
v-model="labels[0].translation"
label="Translation"
>
</v-text-field>
</v-card-text>
</v-card>
After using:
style="overflow: visible"
All text is displayed but still not multiline.
Edit:
After using p instead of v-toolbar-title:
I think you might be better off not using the toolbar at all in this case - it's been designed to have a set of fixed heights (that's why it has the short, prominent and extended prop). You have multiple alternative options, but this might be the easiest:
<v-card max-width="900" class="mb-6">
<v-card-title color="grey darken-2 white--text">
{{ labels[0].key }}
</v-card-title>
<v-card-text>
<v-text-field
color="grey"
v-model="labels[0].translation"
label="Translation"
>
</v-text-field>
</v-card-text>
</v-card>
If you specifically need the dark prop, you can wrap the title in a v-sheet instead:
<v-card max-width="900" class="mb-6">
<v-sheet dark>
<v-card-title>
{{ labels[0].key }}
</v-card-title>
</v-sheet>
<v-card-text>
<v-text-field
color="grey"
v-model="labels[0].translation"
label="Translation"
>
</v-text-field>
</v-card-text>
</v-card>
https://codepen.io/thomaskuhlmann/pen/rNyLXxL
I don't think it's possible ... I searched through Vuetify ... you can change it to ordinary p element not v-toolbar-title
Related
We use Vuetify component framework in our Vue.js based app. There is a dialog with some built-in components on it. As you can see on the screenshot below two textareas with red rectangles display some information. The issue is I don't need the vertical scroll bars. I need more space inside textareas to fully display the information. In other words, I just need to increase the height of dialog itself in order to increase the height of components including textareas. The dialog looks as following:
The code looks as following:
<template>
<wrapper>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-card-title>
<span class="headline">Заявка ({{ editedItem.id }})</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex>
<v-text-field v-model="editedItem.status" label="Статус"></v-text-field>
</v-flex>
<v-flex>
<v-text-field v-model="editedItem.comment" label="Комментарий"></v-text-field>
</v-flex>
<v-flex>
<v-textarea :value="fullName(editedItem.user)" label="Клиент" rows="2" disabled></v-textarea>
</v-flex>
<v-flex>
<v-textarea :value="unitName(editedItem.search_by)" label="Студия" rows="2" disabled></v-textarea>
</v-flex>
<v-flex>
<v-textarea v-if="editedItem.services" :value="studio(editedItem.services)" label="Услуги" rows="2" disabled></v-textarea>
</v-flex>
<v-flex>
<v-textarea v-if="editedItem.periods" :value="desiredTime(editedItem.periods)" label="Желаемое время" rows="2" disabled></v-textarea>
</v-flex>
<v-flex>
<v-text-field :value="formatDateWithoutHours(editedItem.date)" label="Желаемая дата" disabled></v-text-field>
</v-flex>
<v-flex>
<v-text-field :value="formatDate(editedItem.created_at)" label="Дата создания" disabled></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="close">Cancel</v-btn>
<v-btn color="blue darken-1" flat #click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
I've tried to change several height values, but nothing helps.
v-dialog component actually grows based on content.
You should try to add auto-grow prop to v-textarea to make textarea automatically increase in size when the contained text exceeds its size.
vuetifyjs.com/en/components/textareas/#auto-grow
When using Vuetifies V-Window component I recognized that the left and right buttons are jumping when moving left or right.
Even on their examples it is the case: https://vuetifyjs.com/en/components/windows/#customized-arrows
Can anyone say how it can be fixed the best way for the "customized arrows" example?
You can set a height in v-windows component to solve it.
https://codepen.io/vinisalves/pen/yLVGVjZ?editors=1010
<div id="app">
<v-app id="inspire">
<v-card
color="black"
dark
flat
tile
>
<v-window v-model="onboarding" style="height: 200px"> <!-- here -->
<v-window-item
v-for="n in length"
:key="`card-${n}`"
>
<v-card
color="transparent"
height="200"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<v-card-text>
Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.
</v-card-text>
</v-row>
</v-card>
</v-window-item>
</v-window>
<v-card-actions class="justify-space-between">
<v-btn
text
#click="prev"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-item-group
v-model="onboarding"
class="text-center"
mandatory
>
<v-item
v-for="n in length"
:key="`btn-${n}`"
v-slot="{ active, toggle }"
>
<v-btn
:input-value="active"
icon
#click="toggle"
>
<v-icon>mdi-record</v-icon>
</v-btn>
</v-item>
</v-item-group>
<v-btn
text
#click="next"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
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
I'm new to vuetify.js and started playing around with it.
This is my code.
Admin-panel.vue
<v-content class="yellow">
<v-container>
<v-layout>
<router-view></router-view>
</v-layout>
</v-container>
</v-content>
create-user.vue
<template>
<v-container class="red">
<v-layout class="blue">
<v-flex md12>
form
</v-flex>
</v-layout>
</v-container>
</template>
Here I can see v-container element gets the full width available.
What I want is my v-container inside the create-user component to get the that same width. (Yellow will disappear and red will fill the screen)
How do I achieve this?
Use the fluid prop:
<v-container
fluid
/>
Codepen.
I was having the same issue.
I realized that in my instance I had a <v-content> on both the parent and child page. The <v-content> is used to make the app look pretty and manage spacing on the nav bar and title bar.
Be sure you only have one declared in your app.
Did you try using the margin and padding classes/props?
<v-container class="red ma-0">
or
<v-container class="red" :ma-0="$vuetify.breakpoint.mdAndDown">
for having the full screen only for mobile devices?
The answer posted by #Billial Begueradj is perfect. However, problem may still persist if there's an unchecked v-container tag up the hierarchy.
This will NOT work
<v-container>
<v-container fluid>This will not work</v-container>
<v-container>
In the above code, the inner v-container tag will not achieve full-width because there's another v-container tag up in the hierarchy that is not set to layout in full-width and it'll effectively limit the inner one
This will work
<v-container fluid>
<v-container fluid> This will work </v-container>
</v-container>
Setting both the inner and the outer v-container tags to occupy full width resolves it.
use fluid and remove the padding if any
<v-container fluid class="py-0 px-0"></v-container>
you may try like this
master.vue
<v-app id="app">
<v-navigation-drawer
v-model="drawer"
temporary
absolute
>
<sidebar></sidebar>
</v-navigation-drawer>
<v-toolbar dark color="primary" fixed app>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title class="white--text">MyBlog</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-text-field
color="purple"
id="globalSearch"
name="globalSearch"
label="Search"
v-model="globalSearch"
v-validate="'required'"
></v-text-field>
<v-btn to="dashboard" flat>Dashboard</v-btn>
<v-btn to="login" flat>Login</v-btn>
<v-btn flat>Register</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer height="auto">
<v-card
flat
tile
class="indigo lighten-1 white--text text-xs-center"
>
<v-card-text>
<v-btn
v-for="icon in icons"
:key="icon"
icon
class="mx-3 white--text"
>
<v-icon size="24px">#{{ icon }}</v-icon>
</v-btn>
</v-card-text>
<v-card-text class="white--text">
©2018 — <strong>Eliyas Hossain</strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
category.vue
<template>
<v-card>
<v-card-title>
<div>
<h2 class="pl-2">Categories</h2>
<v-btn #click="dialog = !dialog" color="primary" dark>New Category</v-btn>
</div>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
</v-card>
</template>
so it will take full space in right side.
For anyone using nuxt - make sure you apply the fluid prop to the top level v-container in the layout and not the ones in your page components.
<v-main>
<v-container fluid>
<Nuxt />
</v-container>
</v-main>