I need to use a fixed toolbar (with an extension). Problem is that The toolbar overlays the content as soon as the fixed prop gets added. How to place the content below the toolbar?
CodePen example: https://codepen.io/anon/pen/jpgjyd?&editors=101
<div id="app">
<v-app id="inspire">
<v-toolbar
color="primary"
dark
fixed
extended
>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title slot="extension">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
</v-toolbar>
<v-layout>
<v-flex xs1 >
+++ FIRST LINE +++
[lots of text...]
</v-flex>
</v-layout>
</v-app>
</div>
One solution is adding app to v-toolbar and wrap v-layout inside v-content
<v-toolbar
app
color="primary"
dark
fixed
extended
>
...
</v-toolbar>
<v-content>
<v-layout>
</v-layout>
</v-content>
Demo https://codepen.io/ittus/pen/mGdbeN?editors=1010
References: Vuetify application layout tutorial
Add app to v-toolbar and wrap v-layout inside v-content
Couldn't get exactly your question, is this what you wanted to achieve:
new Vue({
el: '#app',
mounted(){
var fixedElement = document.getElementsByClassName('v-toolbar--fixed')[0];
var layout = document.getElementsByClassName('layout')[0];
layout.style = "padding-top: "+ fixedElement.offsetHeight + 'px';
}
});
https://codepen.io/Younes_k/pen/LJEjOL
Related
I need a vertical navbar to the left of my app's layout, and with the content all across the right.
As it stands, I can't do that. My navbar pushes all the content down. How can I fix this?
This is what my App.vue's template looks like:
<template>
<div id="app">
<v-app>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-app>
</div>
</template>
For the navbar component I am using vuetify, specifically the mini navbar
As per the example code, here is what it currently looks like:
<template>
<v-navigation-drawer
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-title>John Leider</v-list-item-title>
<v-btn
icon
#click.stop="mini = !mini"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</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>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component<Navbar>({})
export default class Navbar extends Vue {
private value: string = 'home';
private drawer: boolean = true;
private items: Array<Object> = [
{ title: 'Home', icon: 'mdi-home-city' },
{ title: 'My Account', icon: 'mdi-account' },
{ title: 'Users', icon: 'mdi-account-group-outline' }
]
private mini: boolean = true;
}
</script>
As mentioned on the top, this is still just pushing all the app's content down. This is what it currently looks like:
What can I do so that on the left I have my navbar but on the right
Edit: For the sake of clarification, I do want the navbar to be vertical, but I just don't want it to push down all the content. Basically I want my app to have a side navigation
Wrap the navbar and main in a <v-row>:
<template>
<div id="app">
<v-app>
<v-row>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-row>
</v-app>
</div>
</template>
By default, v-app has an internal wrapper with flex-direction: column CSS, meaning that its child elements are placed vertically. By wrapping these 2 child elements in a v-row, you place them in a wrapping element with flex-direction: row.
I guess you are misunderstanding the concepts. You are wrapping a v-navigation-drawer inside a navbar component.
In Vuetify v-navigation-drawer is a component used to build Sidebars and that's why your component is on vertical.
You should try to use v-app-bar instead. Here's the documentation: https://vuetifyjs.com/en/components/app-bars/
Edit 1
You can configure an app sidebar or an app navbar using the app option inside the component like that:
<v-navigation-drawer
app
>
...
</v-navigation-drawer>
Just like in the official documentation. If you do it that way, the component will work properly and your content will not be pushed down.
I am trying to create an expandable app bar in Vuetify, which shows a datepicker within the app bar when the app bar is expanded.
When the app bar is expanded, the datepicker is shown as an overlay instead of expanding the app bar. How do I make the app bar expand to contain the datepicker instead of showing the datepicker on top of the app bar.
I have created a codepen as an example: https://codepen.io/thomasabcd/pen/eYmOoVQ
<div id="app">
<v-app id="inspire">
<div>
<v-app-bar dark>
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon #click="extended=!extended">
<v-icon>mdi-calendar</v-icon>
</v-btn>
<template v-slot:extension v-if="extended">
<v-date-picker full-width />
</template>
</v-app-bar>
</div>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data(){
return{
extended: false
}
}
})
Use the extension-height prop of the app-bar..
<v-app-bar dark extension-height="100%">
<v-toolbar-title>Page title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon #click="extended=!extended">
<v-icon>mdi-calendar</v-icon>
</v-btn>
<template v-slot:extension v-if="extended">
<v-date-picker full-width dark />
</template>
</v-app-bar>
https://codeply.com/p/tJ3HM4HRZg
I was trying to keep the Vuetify dialog title and the headers of the content fixed to the top while scrolling. I used "style:"position:fixed".
When I scroll, the heading and the headers become out of the view. The current code is as given below
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialogTips" max-width=800>
<v-card>
<v-card-title
class="text-xs-center justify-center primary title white--text darken-2 font-weight-bold">
{{dialogTipsHeading}}</v-card-title>
<!-- Displaying Tips matrix Headers-->
<v-layout
v-if="dialogTableOn"
row wrap
class="text-xs-center mx-auto pt-2 justify-space-between teal--text darken-4 "
style="width:600px;"
>
....
Table Headers
....
</v-layout>
....
some Table of content
....
<!-- Diplaying dialog buttons -->
<v-layout
>
<v-card-actions
class="text-xs-center mx-auto justify-space-around">
<v-btn v-if="dialogTipsBtn1" class="align-content-center d-flex mx-auto" dark color="red darken-4 font-weight-bold" text #click="clearDialog('no')">{{dialogTipsBtn1}}</v-btn>
<v-btn v-if="dialogTipsBtn2" class="align-content-center d-flex mx-auto font-weight-bold" dark color="green darken-4" text #click="clearDialog('yes')">{{dialogTipsBtn2}}</v-btn>
</v-card-actions>
</v-layout>
</v-card>
</v-dialog>
</v-flex>
</v-layout>
Here is the function that calls the dialog
handleDialog()
{
this.dialogTipsHeading = "Roughness Parameters of Transportation channel Materials"
this.dialogTipsBtn1 = ""
this.dialogTipsBtn2 = "OK"
this.dialogTableOn = true,
this.isDialogTips = true
}
The result that I get is like this
Please suggest a way to keep the content(The heading and the Table headers) fixed at the top and to scroll the table content. Also, is there a way to keep the action buttons always visible?
Thank you in advance!
Finally, I fixed it myself
It was about adding a prop "scrollable" in the "v-dialog" component and then setting the height of the "v-card-text" component
<v-dialog scrollable v-model = "isDialogTips"
max-width = 800 >
....
code (title/heading/headers)
...
<v-card-text
style = "height: 600px;" >
....
code
....
</v-card-text>
</v-dialog>
Now, the result, as desired, looks like this. The heading and the headers stay at the top and the button is always visible at the bottom.
I attempted to insert a new line in the string which is the Vuetify dialog text by using \n in the string. But it does not work.
Here is the code for the function that calls Vuetify dialog
handleDialog()
{
this.dialogHeading = "Clearing all component data"
this.dialogText = "Do you really want to clear all the component data?\nThis will clear the components except the pressure and composition basis!"
this.dialogBtn1 = "Cancel"
this.dialogBtn2 = "Yes"
this.isDialog = true
}
And here is the code for displaying the Vuetify dialog
<v-layout row wrap >
<v-flex class="text-xs-center">
<v-dialog v-model="isDialog" persistent max-width=400>
<v-card>
<v-card-title class=" error title white--text
darken-2 font-weight-bold">{{dialogHeading}}
</v-card- title>
<v-card-text>{{dialogText}}</v-card-text>
<v-card-text v-if="dialogText2">{{dialogText2}}
</v-card-text>
<v-card-actions >
<v-btn v-if="dialogBtn1" flat class=
"align-content-center d-flex mx-auto" dark
color="red darken-1 font-weight-bold"
text
#click="clearDialog('no')">{{dialogBtn1}}</v-btn>
<v-btn v-if="dialogBtn2" flat
class="align-content-center d-flex mx-auto
font-weight-bold" dark color="green darken-1"
text #click="clearDialog('yes')">{{dialogBtn2}}
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-flex>
</v-layout>
I've tried using '\n' .
I need the second sentence in the next line
Here is the screenshot of the result that I get
Any help would be appreciated. Thank you in advance
You should use <br/> tag instead of \n in order to go to the next line and use v-html directive to render that string :
this.dialogText = "Do you really want to clear all the component data?<br/>This will clear the components except the pressure and composition basis!"
template:
<v-card-text v-html="dialogText"></v-card-text>
One way to achieve this would be to wrap each line in a block-level element such as a <div> within the template. The original string could be split on newlines and iterated accordingly:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
dialogText: 'First line\nSecond line'
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/#mdi/font#3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify#2.0.17/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue#2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.0.17/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-card>
<v-card-title>Title</v-card-title>
<v-card-text>
<div v-for="(text, index) in dialogText.split('\n')" :key="index">
{{ text }}
</div>
</v-card-text>
</v-card>
</v-app>
</div>
This retains the default escaping behaviour that would be lost using v-html.
The easiest way is to use div, like this:
<v-card-text>
<div>{{ dialogText }}</div>
<div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>
The code is from vuetify card docs
you can put text-pre-wrap on your element's class and just use regular \n breaks or even template strings with line breaks in them:
<v-card-text class="text-pre-wrap">
{{dialogText}}
</v-card-text>
<!-- The same as -->
<v-card-text class="text-pre-wrap">
{{
`Do you really want to clear all the component data?\nThis will clear the components except the pressure and composition basis!`
}}
</v-card-text>
<!-- The same as -->
<v-card-text class="text-pre-wrap">
{{
`Do you really want to clear all the component data?
This will clear the components except the pressure and composition basis!`
}}
</v-card-text>
I'm using the VuetifyJS dropdown menu component and I need to get it to the same width of the other button in my attached example. Unfortunately the block settings don't work.
CodePen example of the issue: https://codepen.io/anon/pen/djvyVw?&editors=101
<div id="app">
<v-app id="inspire">
<v-card>
<v-flex xs10 offset-xs1>
<v-btn block round depressed dark large color="green darken-4">
<v-icon large>info</v-icon>
</v-btn>
<v-menu offset-y>
<v-btn block outline round depressed dark large color="yellow darken-3" slot="activator">
<v-icon>info</v-icon>Learn More</v-btn>
<v-list>
<v-list-tile v-for="(item, index) in items" :key="index" #click="" :class="item.color">
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</v-flex>
</v-card>
</v-app>
</div>
How to get it to full width like the other button?
Simply give v-menu the full-width attribute:
<v-menu offset-y full-width>
...
</v-menu>