Overflow hidden not working. It creates another scroll bar like in the image
I copied the code directly from Vuetify and tried it in code pen and the results were the same.
<template>
<v-card class="overflow-hidden">
<v-app-bar
absolute
color="#fcb69f"
dark
shrink-on-scroll
src="https://picsum.photos/1920/1080?random"
scroll-target="#scrolling-techniques-2"
>
<template v-slot:img="{ props }">
<v-img
v-bind="props"
gradient="to top right, rgba(19,84,122,.5), rgba(128,208,199,.8)"
></v-img>
</template>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>`enter code here`
</v-app-bar>
<v-sheet
id="scrolling-techniques-2"
class="overflow-y-auto"
max-height="600"
>
<v-container style="height: 1000px;"></v-container>
</v-sheet>
</v-card>
</template>
You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet. (You might just remove the v-card altogether)
I would guess the vuetify docs have this so the examples work on their own site.
This is happening for two reasons-
Outer Scrollbar comes from html.
bcz your contents like- v-sheet, v-container exceed your screen height
Inner Scrollbar is for v-sheet
bcz v-sheet's max-height is 600px & It's content container's height is 1000px which overflows v-sheet's height.
There is no fixed height of v-card, it's flexible to it's content. So,
don't add overflow-hidden class to it. You should hidden in any of
html or v-sheet
Related
I need to place content inside v-app-bar inside container, so It goes in one line with other page content. All content inside app should have max width for each breakpoint instead of full page width. Placing all content iside container don't solve problem.
I marked with red box on screenshot where content should be.
Hey I am having the same issue. I came up with a rough work around, my question is here incase you found an answer as well.
Make vuetify app bar items align with <v-container> body content
My solution looks like so:
The colors show the nav bar width adjusted to match the body. The code looks like so:
<template>
<v-sheet color="red">
<v-container class="pa-0">
<v-app-bar
dense
flat
color="blue accent-4"
>
<v-btn icon>
<v-icon>mdi-home-outline</v-icon>
</v-btn>
<v-divider inset vertical></v-divider>
<v-btn text :key="item.id" v-for="item in quickLinks" v-text="item.text"></v-btn>
<v-spacer></v-spacer>
<v-btn text v-text="'Sign In'"></v-btn>
<v-btn text v-text="'Register'"></v-btn>
</v-app-bar>
</v-container>
</v-sheet>
</template>
For others looking to only constrain the content of the v-app-bar, I found a good example over at https://vuetifyjs.com/en/examples/wireframes/constrained/ (as Ari pointed out in the comment for the main question):
<template>
<v-app-bar app>
<v-container class="pa-0 fill-height">
<!-- [...] -->
</v-container>
</v-app-bar>
</template>
I got mine to work and also keep the navbar background extended to the edge of the screen. You can put a container inside the app-bar but it messes with the flexbox of the items so you just have to put a v-row inside for them to align properly.
<template>
<nav class="toolbar" align="center">
<v-app-bar app>
<v-container>
<v-row align="center">
<v-app-bar-title>
<!-- Title-->
</v-app-bar-title>
<div>
<!-- Left side content -->
</div>
<v-spacer />
<div>
<!-- Right side content -->
</div>
</v-row>
</v-container>
</v-app-bar>
</nav>
</template>
<style scoped>
.v-container {
max-width: 60% !important;
}
</style>
I have two icons, how can I make a space between them?
two Icons in App.vue:
<v-btn icon class="grey lighten-4">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
It's recommended to use built-in class name like mx-2 to add some margin around the buttons after wrapping them by a div:
<div >
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-magnify</v-icon>
</v-btn>
<v-btn icon class="grey lighten-4 mx-2">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</div>
LIVE DEMO
according to vuetify v-icon api.
we need to use left or right .
left: Applies appropriate margins to the icon inside of a button when placed to the left of another element or text.
right: Applies appropriate margins to the icon inside of a button when placed to the right of another element or text
So i have been attempting to create a V-Card in vuetify with a specific layout. The top part of the card will vary in size and therefore I need to be able to align the bottom part of the card to the bottom.
So i've tried to do the following code here which should allow the first part to "grow" to fill the height and then the second part to "shrink" and stay at the bottom...
However, no success.. I probably just have done something sligthly wrong here but I'm pulling out my hair...
Here is my code:
<v-card shaped color="white" height="100%" width="100%">
<v-container fluid>
<v-layout column>
<v-flex grow>
{{ skinName }}
<v-img :src="skinImage" />
</v-flex>
<v-flex shrink>
<v-chip
class="ma-2"
color="indigo"
text-color="white"
>
<img height="10px" src="~static/logo-icon.png"> {{ priceInCoins | decimalPlace }}
</v-chip>
</v-flex>
</v-layout>
</v-container>
As you can see from my image, the blue "coins" should all align at the bottom in the same place no matter how big the text is above it!
Let me know if you need any more information.
Your container is not filling the height of the card, so there is no 'empty space' for the flexbox to redistribute. You can use the fill-height attribute on both the layout and the container element to make sure it stretches.
I am trying to get rounded corners on a v-card as I can get on a btn, but it does not seems to be possible ?
I used
<v-card round class="elevation-0">
Here is my template
<template>
<section id="section2">
<v-parallax :src="require('../../assets/images/members.jpeg')" height="380">
<v-layout column align-center justify-center>
<v-flex xs12 sm12 md8>
<v-card round class="elevation-0">
<v-card-title primary-title class="layout justify-center">
<h3 v-html="$t('lang.views.home.section4.thank_you')" ></h3>
</v-card-title>
<v-card-text>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-parallax>
</section>
</template>
v-card has rounded corners by default. It does not provide a prop named round to make it have more rounded corners.
If you want to have more rounded corners as compared to the default then add a custom css class to v-card
<v-card class="rounded-card">
css
.rounded-card{
border-radius:50px;
}
Here is a codepen
I would like to update Vamsi Krishna's answer. Vuetify now provides since v2.3 border utilities to quickly style the border-radius of any element.
To minimize custom CSS and make your Vue app more consitent, you may now use .rounded-xs, .rounded, .rounded-lg or .rounded-xl classes as specified in the docs:
<v-card class="rounded-lg">
You can use:
<v-card class="rounded-xl">
For round card in Vue.js:
Other Class{
.rounded-0
.rounded-sm
.rounded-md
.rounded-xl
.rounded-pill
.rounded-circle
}
Reference Link: https://vuetifyjs.com/en/styles/border-radius/#usage
v-card has a prop called shaped which applies border radius to top left and bottom right, but we can add our own border radius like this
<v-card shaped class="rounded-corner"></v-card>
CSS
.rounded-corner{
border-radius:20px;
}
You can use the border radius to style border-radiuses of any element. In Vuetify's official documentation they show its use in divs.
For instance, the below code gives you a rounded circle.
<div class="pa-7 secondary rounded-circle d-inline-block"></div>
Here's the documentation link: https://vuetifyjs.com/en/styles/border-radius/#removing-border-radius
What I want is that to fill the width of the entire mobile screen with vuetify
with this code :
<v-content>
<router-view>
<v-container fluid></v-container>
</router-view>
</v-content>
the router view has a margin on both left and right side
and that bottom-nav is already fitted on the screen and I won't be dragging the screen to show the bottom-nav
I needed to dynamically remove padding only on mobile, this works for me:
<v-container :class="{'px-0': $vuetify.breakpoint.xsOnly }">
<router-view> </router-view>
</v-container>
There is not much documentation that I could find as of now, but looking at the code I found these:
// Breakpoint ranges.
xsOnly,
smOnly,
smAndDown,
smAndUp,
mdOnly,
mdAndDown,
mdAndUp,
lgOnly,
lgAndDown,
lgAndUp,
xlOnly,
you can also try this, vuetify has helper classes to set padding and margin
<v-container fluid class="pa-0 ma-0">
</v-container>
v-container creates a div with the class container. This class gives your div padding on all sides. (The amount changes depending on the viewport breakpoint; it's 2px for xs, 24px for xl). If you include the below in your css, your side padding should go away.
.container {
padding: 0!important
}