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
Related
i have made a card for sign in and there are no colours on any of the created components. the bottom of card consitst of two button but even those colors are not visible. i have attached the template section of my code. even the blue color of text fields is not visible. what can be the possible error?
<template>
<div>
<v-container>
<v-layout wrap>
<v-row>
<v-col cols="5">
<v-img
src="https://image.freepik.com/free-vector/programmer-working-flat-style_52683-15041.jpg?w=740"
width="500"
height="400"
></v-img>
</v-col>
<v-col cols="7" align-self="end">
<v-flex sm12 md-8 offset-md3>
<v-card elevation="6" width="700">
<v-card-title>
<v-layout align-center justify-space-between>
<h3 class="headline">Sign In</h3>
</v-layout>
</v-card-title>
<v-divider></v-divider>
<v-card-text>
<p>Sign in with your username and password:</p>
<v-text-field
autofocus
label="Email"
v-model="email"
type="email"
></v-text-field>
<v-text-field
outline
hide-details
label="Password"
type="password"
v-model="password"
></v-text-field>
</v-card-text>
<br />
<v-divider></v-divider>
<v-container class="px-5" >
<v-checkbox
class="pl-1"
dense
label="Remember Me"
></v-checkbox>
</v-container>
<v-card-actions>
<v-btn class="green--text" color="info" flat to="/forgotdialogue">
Forgot password?
</v-btn>
<v-spacer></v-spacer>
<!-- <landingpage :username="username"></landingpage> -->
<v-btn #click="signUp" color="info">
<v-icon left>mdi-lock</v-icon>
Signup
</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-col>
</v-row>
</v-layout>
</v-container>
</div>
</template>
Got it
i just had to change my App.vue file.
in App.vue I included the code in between v-app tags. After this all the colors were restored. Read about it here in this vuetify page https://vuetifyjs.com/en/components/application/
I am having issue with Vuetify list inside dialog. My goal is to have available header/footer and inside it have a scrollable list with all this content having max of 600px height but being adjusted on smaller screens.
Right now, I have issue where it is working correctly for bigger screens height > 600px (I can scroll list + I see buttons at the bottom) but work incorrectly on smaller screens (can scroll list but have to scroll at the end to see buttons).
Do anyone have an idea what did I forget to add?
<!-- MovementsInput component -->
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation>
<v-card
>
<v-card-title class="headline primary">
Add new movement
</v-card-title>
<v-card-text>
<v-list
style="max-height: 600px"
class="scroll-y">
<template
v-for="movement in movements">
<v-list-tile
:key="movement.name">
<v-list-tile-title>
{{movement.name}}
</v-list-tile-title>
</v-list-tile>
</template>
</v-list>
<!-- Ignore this autocomplete, forget to remove it from screenshot -->
<v-autocomplete
v-model="movement"
:items="movements"
:color=this.$vuetify.theme.secondary
hide-selected
item-text="name"
item-value="name"
label="Movement"
placeholder="Select movement from the list"
return-object
></v-autocomplete>
</v-card-text>
<v-card-actions>
<v-btn
color="grey"
#click="cancelClicked"
>
Cancel
<v-icon right>fa-undo</v-icon>
</v-btn>
<v-spacer></v-spacer>
<v-btn
:disabled="!valid"
:rules="[v => !!v || 'Everything has to be valid']"
required
color="primary"
#click="confirmClicked"
>
Confirm
<v-icon right>fa-check</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-form>
</template>
<!-- Other file, all this is for now called in simple Vuetify dialog -->
<v-dialog
persistent
:value="true"
>
<MovementsSelect />
</v-dialog>
So, I did find solution, here is full example from Vuetify documentation.
<template>
<v-layout row justify-center>
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal first name*" required></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field
label="Legal last name*"
hint="example of persistent helper text"
persistent-hint
required
></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Email*" required></v-text-field>
</v-flex>
<v-flex xs12>
<v-text-field label="Password*" type="password" required></v-text-field>
</v-flex>
<v-flex xs12 sm6>
<v-select
:items="['0-17', '18-29', '30-54', '54+']"
label="Age*"
required
></v-select>
</v-flex>
<v-flex xs12 sm6>
<v-autocomplete
:items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
label="Interests"
multiple
></v-autocomplete>
</v-flex>
</v-layout>
</v-container>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" flat #click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</template>
Try adding v-app in your MovementsInput component.
Your component should be like this:
<template>
<v-app>
<!-- your component code here -->
</v-app>
</template>
More info here : https://vuetifyjs.com/en/getting-started/frequently-asked-questions#my-application-does-not-look-correct
I have been playing with vuetify, I've been trying to mimic a specific layout to see if I can do it and add tabs. So far, I've been able to center stuff but in a way that I view as weird. I want the h1 to be under the avatar.
I used v-spacer to center things and added tabs that are centered at the bottom
when I use v-slot it aligns everything in the middle.
If it's just the avatar it's perfect.
When I add an h1 under it does not go directly under.
I've been looking at the api and can't figure out.
Here's a link to the codepen https://codepen.io/sanwil9/pen/mYQaRx
<div id="app">
<v-app id="inspire">
<v-app-bar prominent extended
src="https://images3.alphacoders.com/114/114869.jpg"
dark
>
<v-spacer></v-spacer>
<v-avatar
size="90"
>
<img
src="https://media.licdn.com/dms/image/C5103AQHlAw-naKhLig/profile-displayphoto-shrink_100_100/0?e=1564617600&v=beta&t=xLgLkONVQpvaxUZfkcI3TYG9yoditHjjoWNbRUKHWqk"
alt="Avatar"
/>
</v-avatar>
<h1>Super Steve</h1>
<v-spacer></v-spacer>
<template v-slot:extension>
</template>
<template v-slot:extension>
<v-tabs centered>
<v-tab>Tab 1</v-tab>
<v-tab>Tab 2</v-tab>
<v-tab>Tab 3</v-tab>
</v-tabs>
</template>
</v-app-bar>
<v-content>
<v-container grid-list-md text-xs-center>
<v-layout row wrap>
<v-flex xs12>
<v-card dark color="primary">
<v-card-text class="px-0">12</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 2" :key="`6${i}`" xs6>
<v-card dark color="secondary">
<v-card-text class="px-0">6</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 3" :key="`4${i}`" xs4>
<v-card dark color="primary">
<v-card-text class="px-0">4</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 4" :key="`3${i}`" xs3>
<v-card dark color="secondary">
<v-card-text class="px-0">3</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 6" :key="`2${i}`" xs2>
<v-card dark color="primary">
<v-card-text class="px-0">2</v-card-text>
</v-card>
</v-flex>
<v-flex v-for="i in 12" :key="`1${i}`" xs1>
<v-card dark color="secondary">
<v-card-text class="px-0">1</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
Help me align the h1 under the gravatar. I want it to be aligned.
Within the <v-app-bar> you can include the following:
<v-container>
<v-layout row>
a spacer, the avatar, and another spacer
</v-layout>
<v-layout row>
a spacer, the <h1>, and another spacer
</v-layout>
</v-container>
the template for the extension
This will insert a grid which will allow you to turn the single container of default content into two separate rows.
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
My dialog box in our web app renders an empty white-space between the v-cards and the v-card-action buttons (Save and Cancel). What can I do to remove this whitespace / scrollbar?
I tried moving Cancel/Save to inside of where are, but it still leaves a whitespace now below the buttons.
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="success" dark class="mb-2" v-on="on">Add Student</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.studnum" label="Student Number"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.surname" label="Surname Name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.fname" label="First Name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.mname" label="Middle Initial"></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 expect the output to have a smaller dialog box, but now it has whitespaces in the middle.
Images:
Actual output:
https://prnt.sc/nkpvek
https://prnt.sc/nkpvr0
Expected output:
https://prnt.sc/nkpwjk
Thank you !
I'd advise against putting button inside your dialog as an activator. Messes up CSS sometimes. Place it outside and do
#click="dialog = true"