I have a Vue application running Vuetify but neither of these seem to be equipped to handle my desire to limit the maximum length of the page to be such that there is no scrolling. I hope that makes sense. My hope is to just pull up a screen with a bunch of routing to similarly formatted screens. Of course, the user could make the window smaller, in which case I would need scrolling. So how would I set that up when I want to have the page open to full screen with a maximum page length that will prevent the NEED for scrolling, but still allow scrolling if the need is there due to the user resizing the page to something a good bit smaller?
I spent hours looking around for details on this but didn't find anything that really seemed to be a direct solution. How can I set a max page length? Would CSS offer this? I saw a solution putting CSS in the <head>-tag but with a Vue application this head tag doesn't get used in the same way as typical HTML pages.
EDIT: because I don't think it's clear that because I'm working in vue/vuetify the solution might be different from the general case, I think it is best if I provide my App.vue and an example page.
--- App.vue ---
<template>
<v-app>
<app-toolbar></app-toolbar>
<router-view></router-view>
<app-footer></app-footer>
</v-app>
</template>
<script>
import AppToolbar from "./components/AppToolbar.vue";
import AppFooter from "./components/AppFooter.vue";
export default {
name: "App",
components: {
AppToolbar,
AppFooter
},
data: () => ({
//
})
};
</script>
<style scoped></style>
--- Homepage.vue ---
<template>
<div>
<v-app>
<v-responsive aspect-ratio="16/9">
<v-carousel cycle hide-delimiter-background show-arrows-on-hover>
<v-carousel-item
v-for="(item, i) in items"
:key="i"
:src="item.src"
reverse-transition="fade-transition"
transition="fade-transition"
></v-carousel-item>
</v-carousel>
</v-responsive>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
src: "https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
},
{
src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
}
]
};
}
};
</script>
<style></style>
EDIT 2: Adding the app-toolbar & app-footer
--- Toolbar.vue ---
<template>
<div>
<v-toolbar dense color="#3F51B5" dark>
<v-app-bar-nav-icon
color="#76ff03"
#click.stop="drawer = !drawer"
></v-app-bar-nav-icon>
<v-btn to="/" color="#76ff03" text>Vuetification</v-btn>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-spacer></v-spacer>
<v-row align="center" justify="center">
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
<div class="mx-3"></div>
<v-badge
bordered
bottom
color="deep-purple accent-4"
dot
offset-x="10"
offset-y="10"
>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/lists/2.jpg"></v-img>
</v-avatar>
</v-badge>
<div class="mx-3"></div>
<v-badge avatar bordered overlap>
<template v-slot:badge>
<v-avatar>
<v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
</v-avatar>
</template>
<v-avatar size="40">
<v-img src="https://cdn.vuetifyjs.com/images/john.png"></v-img>
</v-avatar>
</v-badge>
</v-row>
<div class="hidden-sm-and-down">
<v-btn icon>
<v-icon color="#76ff03">mdi-magnify</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon color="#76ff03">mdi-dots-vertical</v-icon>
</v-btn>
<v-btn color="#76ff03" text>About</v-btn>
<v-btn to="/contact" color="#76ff03" text>Contact</v-btn>
<v-btn to="/login" color="#76ff03" text>Login</v-btn>
</div>
</v-toolbar>
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
temporary
right
height="160px"
>
<v-list-item>
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/78.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>John Leider</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in items" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</div>
</template>
<script>
export default {
data() {
return {
drawer: false,
items: [
{ title: "Home", icon: "mdi-ghost" },
{ title: "About", icon: "mdi-kabaddi" }
]
};
}
};
</script>
<style scoped>
.toolbar-item {
color: #76ff03;
}
</style>
--- Footer.vue ---
plate>
<v-app>
<v-footer dark padless fixed>
<v-card class="flex" text tile>
<v-card-title class="teal">
<strong class="subheading"
>Get connected with us on social networks!</strong
>
<v-spacer></v-spacer>
<v-btn v-for="icon in icons" :key="icon" class="mx-4" dark icon>
<v-icon color="#76ff03" size="24px">{{ icon }}</v-icon>
</v-btn>
</v-card-title>
<v-card-text class="text-center">
<v-layout>
<v-flex class="toolbar-item" v-for="(col, i) in rows" :key="i" xs3>
<span class="body-2" v-text="col.title.toUpperCase()" />
<div v-for="(child, i) in col.children" :key="i" v-text="child" />
</v-flex>
<v-flex class="toolbar-item" xd3 layout column>
<span class="body-2">CONTACT</span>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-home</v-icon
>
New York, NY 10012, US
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-envelope</v-icon
>
info#example.com
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-phone</v-icon
>
+ 01 234 567 89
</div>
<div>
<v-icon color="#76ff03" size="18px" class="mr-3"
>fa-print</v-icon
>
+ 98 765 432 10
</div>
</v-flex>
</v-layout>
<strong> {{ new Date().getFullYear() }} — Vuetify </strong>
</v-card-text>
</v-card>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
icons: [
"fab fa-facebook",
"fab fa-twitter",
"fab fa-google-plus",
"fab fa-linkedin",
"fab fa-instagram"
],
rows: [
{
title: "Company Name",
children: [
"Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit"
]
},
{
title: "Produts",
children: [
"MDBootstrap",
"MDWordPress",
"BrandFlow",
"BootstrapAngular"
]
},
{
title: "Useful Links",
children: [
"Your account",
"Become an Affiliate",
"Shipping Rates",
"Helper"
]
}
]
})
};
</script>
<style scoped>
strong {
color: #76ff03;
}
.toolbar-item {
color: #76ff03;
}
</style
>
By default, if the HTML content is larger than the window, the browser will create scrollbars and if it's smaller than the window there won't be a scroll. However, I don't think this is what you're really asking for. I think you're trying to change the window size itself.
I'm going to start by saying its very bad practice to modify the size of the user's browser window. You should work to make your content fit instead.
That said, as Vue.js and Vuetify are built on Javascript, and you'll need to write some custom JS to resize the browser window. The default overflow on the <body> tag (yes those exist in a Vue app) will take care of the scrolling...
window.resizeTo(width, height);
Should be called after Vue has rendered the content to the screen so inside Vue's Mounted Lifecycle hook.
Now, I assume the height of the content changes so you would want to grab the height of the Vue app div.
var newHeight = document.getElementById('app').innerHeight()
You also want to get the screen size so you don't make the window larger than the screen. You can get that height from the screen object.
var screenHeight = window.screen.height
so
if(newHeight < screenHeight){
window.resizeTo('800px', newHeight);
} else {
window.resizeTo('800px', screenHeight);
}
Before you do this
You should know that most modern browsers BLOCK the window.resizeTo() function so again you should find a different solution to the problem.
You Can nest your content inside another div element.If max-height of your inner div is equal to the height of its container, scroll bar will never appear. if you want to see scroll bar use this.
.scrollDiv {
height:auto;
max-height:150%;
overflow:auto;
}
Related
I am working with vuetify and I want to implement a Stepper.
Within the stepper I want to have v-card which once clicked on read more would open. So far the functions are working.
The problem is that when I only open a card - meaning in the index.vue I put the card component instead of the stepper, the card opens reacts perfectly. But, when the card is within the stepper component, when I press on read more it is only shown a part of it. I guess some element is having a fixed size and wont resize, but I cannot figure it out where exactly the problem is. Any help is welcomed!
My index.vue file looks like this:
<template>
<v-container>
<v-app>
<div>
<Stepper/>
</div>
</v-app>
</v-container>
</template>
<script>
import Stepper from "../components/Stepper.vue";
export default {
data: () => ({
}),
components: {Stepper }
}
</script>
The Stepper.vue component looks like this:
<template>
<v-stepper v-model="e6" vertical ref="stepper">
<!--- Step 1-->
<v-stepper-step :complete="e6 > 1" step="1">
</v-stepper-step>
<v-stepper-content step="1">
<Card1 />
</v-stepper-content>
<!--- Step 2-->
<v-stepper-step :complete="e6 > 2" step="2">
</v-stepper-step>
<v-stepper-content step="2">
<Card2 />
</v-stepper-content>
<!--- Step 3-->
<v-stepper-step :complete="e6 > 3" step="3">
</v-stepper-step>
<v-stepper-content step="3">
<Card2 />
</v-stepper-content>
</v-stepper>
</template>
The cards inside are from format identical only the text is different. Hence I will post only one card:
<template>
<v-hover >
<template v-slot:default="{ hover }">
<v-card class="mx-auto">
<v-img class="white--text" src="picture1.png" width="300" height="169">
<v-card-title class="text-h5">
{{ $t('welcome_hello') }}
</v-card-title>
</v-img>
<v-card-actions>
<v-btn text color="teal accent-4" #click="openCard()">
Learn More
</v-btn>
</v-card-actions>
<v-expand-transition>
<v-card v-if="reveal" class="transition-fast-in-fast-out v-card--reveal" style="height: 100%;">
<v-card-text class="pb-0">
<p class="text-h4 text--primary">
{{ $t('welcome_message1') }}
</p>
<p>{{ $t('welcome_message2') }}</p>
<p>{{ $t('welcome_message3') }}</p>
</v-card-text>
<v-card-actions class="pt-0">
<v-btn text color="teal accent-4" #click="nextStep()">
Next
</v-btn>
</v-card-actions>
</v-card>
</v-expand-transition>
</v-card>
</template>
</v-hover>
</template>
<script>
export default {
data: () => ({
reveal: false,
}),
methods: {
openCard() {
this.reveal = true
},
closeCard() {
this.reveal = false
},
completedCard(){
},
nextStep() {
this.closeCard()
this.$root.$emit('nextStepFunction') //like this
},
}
}
</script>
<style>
.v-card--reveal {
bottom: 0;
opacity: 1 !important;
position: absolute;
width: 100%;
}
</style>
You should give your v-card a height and then overflow to scroll.
<v-card height="450" style="overflow-y: scroll; overflow-x: hidden">
// Your card body
</v-card>
I made a table component in my project as I have multiple tables that I want to all look the same.
I insert my table onto my page and everything is working fine.
On the table is a dialog which opens correctly but inside that dialog is another one of my table components and this does not render.
It will work if I change the name of the component and have two separate instances but that is not what I am trying to do.
How can I get my table working across all components? Using Vue CLI.
Table component:
<template>
<v-data-table :headers="headers" :items="items" :no-data-text="noDataText" :dark="dark">
<template v-slot:top>
<v-toolbar :dark="dark" flat>
<v-toolbar-title>{{ title }}</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-btn #click="dialog=true" color="success" class="mr-2">
Load Default Frames
<v-icon right>mdi-download</v-icon>
</v-btn>
<v-btn color="primary" class="mr-2">
Create New Frame
<v-icon right>mdi-image-plus</v-icon>
</v-btn>
<Dialog v-model="dialog" />
<!-- <Frame v-model="dialog" :editedFrame="editedFrame" :oldIndex="oldIndex" #close="close" />
<DefaultFrames v-model="defaultFramesDialog" :selectable="true" :items="defaultFrames" />-->
</v-toolbar>
</template>
</v-data-table>
</template>
Dialog component:
<template>
<v-dialog v-model="dialog">
<v-card :dark="dark">
<v-card-title>
{{ name}}
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-btn icon #click="dialog = false">
<!-- <v-icon #click="$emit('close')">mdi-close</v-icon> -->
</v-btn>
</v-card-title>
<Table :is="child_component" :headers="frameHeaders" :items="defaultFrames" />
<v-card-actions>
<v-btn #click="log">Log</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
Table.vue
<template>
<v-btn #click.stop="emitOpenDialog">Open Dialog</v-btn>
</template>
<script>
export default {
methods: {
emitOpenDialog() {
// I've use vueBus for emiting
this.$bus.emit("open-dialog")
}
}
}
</script>
Dialog.vue
<template>
<v-dialog v-model="dialog"> ... </v-dialog>
</template>
<script>
export default {
data: () => ({
dialog: false
},
created() {
this.$bus.on("open-dialog", this.openDialog)
},
beforeUnmount() {
this.$bus.off("open-dialog")
},
methods: {
openDialog() {
this.dialog = true
}
}
}
I'm having some issues to make an avatar picker works...
After click to select the avatar in not being replaced and with the error TypeError: Cannot read property 'src' of undefined at VueComponent.selectAvatar
I'm currently using Vuetify and the v-avatar component with a v-for to load all the images.
Any idea how to make it work?
HTML
<v-flex xs12 pt-0 pb-0>
<h1 class="title mb-4">User Details</h1>
<v-avatar
size="100px"
>
<img
:src="this.selectedAvatar"
alt="Avatar"
>
</v-avatar>
</v-flex>
<v-flex x12>
<v-btn
color="primary"
flat="flat"
small
#click="selectAvatarDialog = true"
class="avatar-btn"
>
Update avatar
</v-btn>
</v-flex>
<v-dialog
v-model="selectAvatarDialog"
max-width="80%"
>
<v-card>
<v-container fluid pa-2>
<v-layout row wrap align-center justify-center fill-height>
<v-flex xs6 sm4 md3 lg2 my-2 class="text-xs-center"
v-for="(avatar,i) in avatars"
:key="i">
<v-img
:src="avatar.src"
aspect-ratio="1"
width="100px"
max-width="100px"
min-width="100px"
class="dialog-avatar-img"
#click="selectAvatar()"
></v-img>
</v-flex>
</v-layout>
<v-card-actions class="mt-2">
<v-spacer></v-spacer>
<v-btn
color="primary"
flat="flat"
#click="selectAvatarDialog = false"
>
Cancel
</v-btn>
</v-card-actions>
</v-container>
</v-card>
</v-dialog>
JS
export default {
layout: 'default',
data() {
return {
selectAvatarDialog: false,
avatars: [
{src: require('#/assets/images/avatar-01.png') },
{ src: require('#/assets/images/avatar-02.png') },
{ src: require('#/assets/images/avatar-03.png') },
{ src: require('#/assets/images/avatar-04.png') },
{ src: require('#/assets/images/avatar-05.png') }
],
selectedAvatar: require('#/assets/images/avatar-01.png'),
}
},
methods: {
selectAvatar(){
this.selectedAvatar = this.avatar.src
console.log('Avatar selected')
}
}
}
Thank you
The problem is in your selectAvatar method where you are trying to use 'this.avatar' but it doesn't exist. The avatar in your for loop isn't passed to your script. You should do like this:
<v-img
...
#click="selectAvatar(i)"
></v-img>
And in your script:
methods: {
selectAvatar(i){
this.selectedAvatar = this.avatars[i].src
console.log('Avatar selected')
}
}
Go to https://vuetifyjs.com/en/components/toolbars
On the top left toolbar we see links: store, support, ecosystem, version, locate
How do I create this style of toolbar button link (with dropdown items)?
(I am unable to find an example)
It's a simple plain menu component.
Click on the example button (dropdown) and on "support"
and you will see, that they behave the same.
If you inspect the "support" button with your browser (Firefox, Chrome Shortcut F12 for both),
you can see thats a "v-menu"(menu component) and you can see the CSS used for it.
<template>
<div>
<v-toolbar rounded tile>
<v-app-bar-nav-icon> </v-app-bar-nav-icon>
<v-app-bar-title>
<route-link to="/" tag style="cursor:pointer">ProjectName</route-link>
</v-app-bar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn flat to="/">
Home
</v-btn>
<v-menu :rounded="rounded" open-on-hover offset-y transition="slide-x-transition" bottom right>
<template v-slot:activator="{ on, attrs }">
<v-btn flat v-bind="attrs" v-on="on">
Services
</v-btn>
</template>
<v-list dense>
<v-list-item v-for="(item, index) in services" :key="index" router :to="item.link">
<v-list-item-action>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-action>
</v-list-item>
</v-list>
</v-menu>
<v-btn to="/about" flat>
About Us
</v-btn>
<v-btn to="/contact" flat>
Contact Us
</v-btn>
</v-toolbar-items>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn to="/signup" flat>Sign Up </v-btn>
<v-btn to="/login" flat>login</v-btn>
</v-toolbar-items>
<v-menu open-on-hover transition="slide-x-transition" bottom right offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-card class="mx-auto" max-width="300" tile>
<v-list dense>
<v-subheader>THEMES</v-subheader>
<v-list-item-group v-model="theme" color="primary">
<v-list-item v-for="(item, i) in themes" :key="i" router :to="item.link">
<v-list-item-action>
<v-icon v-text="item.icon"></v-icon>
</v-list-item-action>
<v-list-item-action>
<v-list-item-title v-text="item.text"></v-list-item-title>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-menu>
</v-toolbar>
</div>
</template>
<script>
export default {
data: () => ({
activate: true,
theme: 1,
themes: [{
text: "Dark",
icon: "mdi-clock"
},
{
text: "Light",
icon: "mdi-account"
}
],
mini: true,
services: [{
icon: "mdi-domain",
title: "Media Monitoring",
link: "/mmrservices"
},
{
icon: "mdi-message-text",
title: "Audience Measurement",
link: "/amrservices"
},
{
icon: "mdi-flag",
title: "Integration Analysis"
}
]
})
};
</script>
I'm trying to get the navigation drawer clipped below the dialog toolbar.
The vuetify manual shows how this works using clipped under a normal toolbar but not with dialog. Recreated issue on: Code pen as well
I tried using fixed property or get it out of the card as well it does not work.
Wondering how else to get it work.
Vuetifyjs: 1.0.5
Vuejs: 2.5.9
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
clipped
right
width=""
height=""
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>
Clipped failed to work but it can be clipped under the dialog tool bar with some inline style. Applied class ='mt-5' and style='top: 16px' to get the desired result.
Codepen
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
right
width=""
height=""
class='mt-5'
style='top: 16px'
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>