I've tried everything to reduce the space between the buttons, so that they all sit nicely centered and evenly spaced in the toolbar when on mobile, but for some reason the space next to the left-most button remains, while the right-most button is slightly over the right edge, as seen in the pic below.
Here's the last thing I tried before coming to ask a question here:
<!-- Notice the "ma-0 pa-0" that I've now added in literally everywhere -->
<v-toolbar fixed color="teal lighten-1" dark class="hidden-md-and-up ma-0 pa-0">
<v-toolbar-items class="ma-0 pa-0">
<v-btn
flat
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile ma-0 pa-0"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
I've also tried things like creating a custom style rule (non-scoped, otherwise Vuetify seems to ignore 'em) like .v-btn.mobile { margin:0; padding:0 } to no avail, and trying all the different justify- attributes.
Other than that I've also tried different Vuetify elements like v-footer, and adding in v-containers, v-layouts and v-flexs. None of which seem to work.
The image is a screenshot from my phone, while connected to the vue dev server on my pc on the same network, in case that makes a difference.
The padding comes from the .v-toolbar__content element created by vuetify.
Unfortunately vuetify doesn't provide a straight-forward way to get rid of this padding.
However you can easily override this with a custom style:
<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
<v-toolbar-items>
<v-btn
flat
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar-items>
</v-toolbar>
With the following style (assuming you're using plain css)
<style scoped>
.my-toolbar >>> .v-toolbar__content {
padding: 0;
}
</style>
You're right, you can't style the vuetify-generated elements directly, but you can keep the scoped styles by using deep selectors
(the >>> in the example, you might need to use /deep/ or ::v-deep if you're using a css preprocessor)
Edit: For centering and stretching the buttons you just need to remove the v-toolbar-items and give the buttons the block attribute and the fill-height class, e.g.:
<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
<v-btn
flat
block
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile fill-height"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar>
If you only want to center the items, you could use something like this:
<v-toolbar fixed color="teal lighten-1" dark class="my-toolbar hidden-md-and-up">
<v-btn
flat
v-for="link in navigation"
:key="link.text"
:class="{ 'teal lighten-2':link.active }"
#click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
class="mobile fill-height ma-0"
>
<v-icon>{{ link.icon }}</v-icon>
</v-btn>
</v-toolbar>
<!-- with the following style: -->
<style scoped>
.my-toolbar >>> .v-toolbar__content {
padding: 0;
justify-content: center;
}
</style>
Related
I have a Nuxt.js and Vue.js project and I have a layout in it that all my landing pages use this layout and I have given a series of styles to the v-app-bar menu tag in this layout. But as you can see in the image on the brokers page, the styles are displayed correctly for the nav-bar section , This means that the nav-bar menu buttons are white in color,
But on the how it work page, the color of the menus should not be white and should be changed to black so that the menus can be easily viewed.
How it works page:
Brokers page:
The main How it works page, which should be designed in the same way:
My Code is:
<v-app-bar absolute color="transparent" elevate-on-scroll>
<div class="d-flex align-center">
<v-img max-width="166"lass="d-flex align-center mr-10" src="/RectangleProfile.png">
</v-img>
<v-btn nuxt to="/landing-page/how-it-works" text
class="mr-2 font-bold-link-text">
How it Works
</v-btn>
<v-btn
text
class="mr-2 font-bold-link-text"
nuxt
to="/landing-page/list-of-top-brokers"
>Brokers</v-btn >
<v-btn text class="mr-2 font-bold-link-text">Tutorial</v-btn>
<v-btn text class="mr-2 font-bold-link-text">Blogs</v-btn>
<v-btn text class="mr-2 font-bold-link-text">About us</v-btn>
<v-btn
v-if="selectedMagnify === false" icon
v-on:click.stop="searchSelected()">
<v-icon color="white">
mdi-magnify
</v-icon>
</v-btn>
<v-text-field
v-else
flat
color="#ffffff"
autofocus
hide-details
rounded
height="40"
filled
dense
single-line
clearable
placeholder="Search">
</v-text-field>
</div>
</v-app-bar>
My CSS Code is:
.font-bold-link-text {
font-weight: normal;
font-size: 14px;
color: #ffffff !important;
}
As Iman said in the comments, you can use a scoped style on the page where you have the problem.
Otherwise, another way is to create a dark class that is bind to a var. And you set it to true on the page where you need the black buttons. That way, you can have your style in a global stylesheet.
Something like :
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-btn text class="mr-2 font-bold-link-text">Light button</v-btn>
<v-btn text class="mr-2 font-bold-link-text" :class="dark: dark">Dark button</v-btn>
<script>
export default {
data(){
return{
dark: true,
}
},
}
</script>
<style scoped>
.font-bold-link-text{
padding: 8px 16px;
color: black;
background: white;
}
.dark{
padding: 8px 16px;
color: white;
background: black;
}
</style>
<style>
#import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
#title {
font-family: "Creepster", cursive;
font-weight: 300;
font-size: 1.5rem;
}
</style>
<template>
<v-app>
<v-app-bar color="#FFEE58" app>
<v-app-bar-nav-icon>
<v-img alt="Heart Logo" width="60" contains src="#/assets/logo.png"/>
</v-app-bar-nav-icon>
<v-spacer></v-spacer>
<div id="title">
<v-toolbar-title>
<b>Title</b>
</v-toolbar-title>
</div>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-heart</v-icon>
</v-btn>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-menu left bottom>
<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-list>
<v-list-item v-for="n in 5" :key="n" #click="() => {}">
<v-list-item-title>Option {{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-app-bar>
<v-main>
<router-view/>
</v-main>
</v-app>
</template>
I've tried wrapping v-toolbar-title in h6. then adding h6 the #title section as well, but the title is still not changing size. I've also tried using px, %, and rem for the font size.
I assume that there is probably a size limit inside of an app-toolbar, but no matter which size I choose, it's still not changing.
You can create your own class and apply it to the <b> tag wrapping the title:
<b class="mytitle">Title</b>
.mytitle {
font-size: 1.5rem !important;
}
Or use the existing toolbar title class and apply it to all toolbar titles:
.v-toolbar__title {
font-size: 1.5rem !important;
}
The !important modifier is necessary
Although #Dan answer would work, I'd recommend not to use !important rule without a particular need. You can achieve the same behavior by providing a more "strong" CSS selector. The easiest way to do it in your case would be to introduce scoped styles for that component.
Title
<style scoped>
.mytitle {
font-size: 1.5rem;
}
</style>
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 have three buttons in a table and when an other data in the row is too long it expands the table and but the three buttons on top of each other. I want to force my three buttons to stay in one line no matter what.
<td class="text-xs-right">
<div>
<v-btn class="teal" fab small dark #click.native="$emit('edit', props.item)">
<v-icon>edit</v-icon>
</v-btn>
<v-btn class="cyan" fab small #click.native="$emit('remove', props.item)">
<v-icon>delete</v-icon>
</v-btn>
<v-btn class="lime" fab small #click.native="$emit('email', props.item)">
<v-icon>email</v-icon>
</v-btn>
</div>
</td>
Normal:
Problem:
Disable wrapping on whitespace:
.text-xs-right {
white-space: nowrap;
/* To help visualize the fact that the container is too small */
width: 10px;
border: 1px solid #ddd;
}
<div class="text-xs-right">
<div>
<v-btn class="teal" fab small dark #click.native="$emit('edit', props.item)">
<v-icon>edit</v-icon>
</v-btn>
<v-btn class="cyan" fab small #click.native="$emit('remove', props.item)">
<v-icon>delete</v-icon>
</v-btn>
<v-btn class="lime" fab small #click.native="$emit('email', props.item)">
<v-icon>email</v-icon>
</v-btn>
</div>
</div>
In this case, where I set an explicit width, this means the items overflow.
In your table, the column should stretch to fit the content.
Add new class to table wrapper
<td class="text-xs-right buttons-cell">
<div>
<v-btn class="teal" fab small dark #click.native="$emit('edit', props.item)">
<v-icon>edit</v-icon>
</v-btn>
<v-btn class="cyan" fab small #click.native="$emit('remove', props.item)">
<v-icon>delete</v-icon>
</v-btn>
<v-btn class="lime" fab small #click.native="$emit('email', props.item)">
<v-icon>email</v-icon>
</v-btn>
</div>
</td>
Then add css styles with min-width property for this class. For example:
.buttons-cell {
min-width: 150px;
}
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>