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
}
Related
The v-switch seems to always take 100% width, as seen below. Is there a way to reduce its clickable area to the minimum? Thanks!
clickable v-switch in the blank: https://vuetifyjs.com/en/components/switches/#usage
I suggest that you read this link from vuetify documentation. the reason that v-switch is continuing to the right of page is that v-container above it. you can modify the layout with vuetify grid system like below:
a Vue js page
<template>
<div class="about">
<v-container
class="px-0"
fluid
>
<v-row>
<v-col md="4">
<v-switch
class="my-border"
v-model="switch1"
:label="`Switch 1: ${switch1.toString()}`"
></v-switch>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
data () {
return {
switch1: true,
}
},
}
</script>
<style scoped>
.my-border {
border: 1px solid #000;
}
</style>
You can add d-inline-block class to v-switch which will reduce the div width to the content's max width.
The alternative, as the previous answer explained, is to wrap it in a row/column. Either don't set a column value or set it to a number because col-auto may cause it to be more narrow than desired and cause label to go over multiple lines.
I'm tryin to add a bar at the bottom of my ElectronJS application and I'd like it to be positioned in the same way as the blue bottom bar in VSCode, where the scroll bar ends/stops above it.
Unfortunately, there always seems to be a small space on the right side where the scroll bar would appear when the content overflows (I don't want to disable the scroll bar / behavior with things such as overflow: hidden; See Edit 2).
I did some testing and with the code below you can see my desired behavior seems to happen with the nav-drawer, i.e. its scroll bar stops right above the v-bottom-navigation, which would be my bottom bar (the thick grey line you see is the scroll bar).
I'm semi-new to this, but I can't figure out why exactly that happens and how to modify it in order to get the same behavior for the whole application.
VueComponent.vue
<template>
<div id="nav-drawer">
<v-navigation-drawer
v-model="drawer"
app
color="white darken-3"
mini-variant
permanent
>
<v-avatar
v-for="n in 30"
:key="n"
:color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`"
size="36"
class="d-block text-center mx-auto my-3"
>
<span>TT</span>
</v-avatar>
<v-avatar class="d-block mx-auto">
<v-btn icon small color="primary">
<v-icon>fas fa-window-maximize</v-icon>
</v-btn>
</v-avatar>
</v-navigation-drawer>
<v-bottom-navigation v-model="value" height="20px" background-color="primary" app>
<v-spacer></v-spacer>
<v-btn icon small>
Button
</v-btn>
</v-bottom-navigation>
</div>
</template>
<script>
export default {
name: "NavDrawer",
components: {
//
},
data: () => ({
drawer: true,
})
}
</script>
P.S. I'm using ElectronJS with VueJS+VuetifyJS - I set it up as described here. Any help is appreciated.
Edit 1: I went through the VSCode source code and found the UI elements (vscode/src/vs/base/browser/ui/). Unfortunately, I wasn't able to figure out which of those is the bar at the bottom (apparently called System Bar, according to some threads I found here and there).
I think it might be the toolbar, but that seems to be part of the actionbar, which is the menu on the left (by default) and doesn't seem to have much CSS to indicate that it's the bar at the bottom.
Edit 2: I tried adding html {overflow: hidden;} in the style section of the main index.html file. It removes the bar of the main page section (the scrollbar you see in the second picture with the two arrows and green button) and the possibility to scroll, but the scrollbar of the nav-drawer remains and the scrolling still works. So, I guess this would be an option if I could still have the scrollbar in the main page section with the code above with the hidden feature enabled as well. Not sure if that's possible though.
Edit 3: Using html {overflow-y: auto;} in the index.html file, removes the scrollbar when there isn't content that is overflowing and it looks just like I want it, but when there is, it still taking up space and looks like the the second image in my post.
Found this example: CodePen
For my case the solution is adapting the :root {...} part to my application, which means to mark the bottom bar as the footer and calculate the content area depending on its size.
The html {overflow: hidden;} must also be in the index.html file's style section.
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
A Vuetify question. Something has just started appearing in my app. On several views/components, I have a v-dialog. Up until a short while ago, the dialog would open correctly but as it was often taller than the screen I could comfortably scroll. Now the dialog seems to have taken control in the respect that I cannot scroll at all when a dialog is open.
This won’t scroll, so I can’t move to the bottom of the dialog. As I said, this is a “new” thing:
What I did, maybe this helps. I put a vue-youtube inside a new component (which is in a v-dialog), I was not happy with exactly where it was, I wanted it higher on the screen so I did the following:
<style scoped>
.v-dialog {
position: absolute;
top: 10%;
}
</style>
However, I initially forgot to use scoped. Not sure if this is the cause but all my dialogs have been affected.
What you need is a scrollable dialog, Please check the link https://vuetifyjs.com/en/components/dialogs/#scrollable
<v-dialog v-model="dialog" scrollable>
<v-card class="pa-3">
<v-card-text>
<v-form>
<!-- Add your form here -->
</v-form>
</v-card-text>
</v-card>
</v-dialog>
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