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
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
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 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 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.
While making list screen with v-list.
I stuck scrolling v-list-title items.
I'm using VueJS and vuetifyjs.
My code snip is at below.
https://codepen.io/badsaarow/pen/aaRaxe?editors=1010
My aim is that toolbar area is fixed, and only v-list-titles are scrollable.
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-lg>
<v-layout row wrap>
<v-flex xs12 sm12 md6>
<v-card>
<v-toolbar color="light-blue" light extended>
<v-btn
fab
small
color="cyan accent-2"
bottom
right
absolute
#click="dialog = !dialog"
>
<v-icon>add</v-icon>
</v-btn>
<v-toolbar-title slot="extension" class="white--text">user list</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list two-line>
<v-list-tile
v-for="user in users"
avatar
#click=""
>
<v-list-tile-avatar>
<v-icon :class="iconClass">face</v-icon>
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>{{ user.lastName }}{{ user.firstName }}</v-list-tile-title>
<v-list-tile-sub-title>{{ user.name }}</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon ripple>
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
Try to add following CSS to make v-list-titles scrollable.
.v-list {
height: 300px;
overflow-y: auto;
}
We need to specify a fixed height for our DOM object, and once we set the overflow-y attribute as auto. A scroll bar will show up once content has bigger length than parent.
Here is the modified version, have a try.
Just add the fixed prop to v-toolbar, as so:
<v-toolbar color="light-blue" light extended fixed>
See here for updated pen