I am using v-container > v-layout > v-row of Vuetify.js, and contents of v-row keep exceeding width of the viewport. I tried the "overflow-x-hidden" class but that was not what I expected.
I will really appreciate it if you let me know to make v-row fill the viewport's width without exceeding it.
Thanks
<template>
<div id="app" class="back">
<v-container fluid>
<v-layout row wrap>
<v-row >
<br><br><br><br>asdf
</v-row>
</v-layout>
</v-container>
</div>
</template>
The v-row component is not designed to contain your content directly. Inside v-row, each section of your content should be wrapped in a v-col component, like this:
<template>
<div id="app" class="back">
<v-container fluid>
<v-row >
<v-col cols="12"> <!-- You can change the COLS attribute to make columns display side-by-side -->
<br><br><br><br>asdf
</v-col>
</v-row>
</v-container>
</div>
</template>
You can read more about Vuetify's grid system here.
EDIT:
Also, you should not use v-layout and v-row in combination. v-layout is for Vuetify 1.x. v-row is for Vuetify 2.x. If you use v-layout, its child component should be v-flex instead of v-col.
Related
I'm trying to prevent two scroll bars appearing when using Vuetify's sheet and calendar.
Here is my code:
<template>
<v-app>
<v-main>
<v-container fluid class="fill-height">
<v-row justify="center" class="fill-height">
<v-col cols="12" class="fill-height">
<v-sheet class="fill-height">
<v-calendar type="week" />
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
Just override the CSS of Vuetify Calendar Component to remove a redundant scroll-bar:
.v-calendar-daily__scroll-area {
overflow-y: hidden !important;
}
Also remove the class="fill-height" from the v-sheet , it make a bit overlap for calendar. I don't know why you added it.
Check it out here:
https://codepen.io/nmdatit/pen/OJpdwox
I have an app with a navbar which should remain static on the left side of the screen.
On the rest of the screen there is a list of items, which can be unlimited for all I care.
The issue is, the navbar is growing to match that list and is scrolling along. I want it to be static regardless of the list's size.
App.vue file template:
<template>
<div id="app">
<v-app>
<v-row>
<navbar/>
<v-main>
<v-container class="main-container">
<my-item-list/>
</v-container>
</v-main>
</v-row>
</v-app>
</div>
</template>
This is what my Navbar component looks like:
<template>
<v-navigation-drawer v-model="drawer" :mini-variant.sync="mini" permanent>
<v-layout justify-space-between column fill-height>
<v-list>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="http://placekitten.com/200/300"></v-img>
</v-list-item-avatar>
</v-list-item>
<v-divider></v-divider>
<v-list-item
v-for="setting in settings.top"
:key="setting.id"
/>
</v-list>
<v-list>
<v-list-item
v-for="setting in settings.bottom"
:key="setting.id"
/>
</v-list>
</v-layout>
</v-navigation-drawer>
</template>
Here are also some screenshots of what is going on:
As you can see here I have all the item of my navbar nicely fitting in my screen, which is how I want it.
However, in the next image:
We now have so many items that it causes the screen to scroll, which is fine btw. The issue is, you can see that the navbar also stretches out to match the scrolling of the items. I would like the navbar to stay just the same as in the first image regardless of how many items are added.
The problem is using v-row to wrap the entire layout. v-row makes the layout flexbox and therefore both child items (the navbar and the main content) become the same height. Remove the v-row and instead use v-content around the main container list. Finally, use the app prop on the v-navigation-drawer...
<v-app>
<v-navigation-drawer
v-model="mainSidebarDrawer"
permanent
app
expand-on-hover
#transitionend="collapseSubItems"
>
<v-layout justify-space-between column fill-height>
<v-list>
..
</v-list>
<v-list>
..
</v-list>
</v-layout>
</v-navigation-drawer>
<v-content>
<v-main>
</v-main>
</v-content>
</v-app>
Demo
I have some problems aligning my layout. The idea is to have a single set of v-expansion-panels in the same row with a v-btn, and have both of them visually centered inside a card. I almost achieved it in this codepen: https://codepen.io/anzuj/pen/PoPPbdw with this structure:
row
/ \
col col
(panel) (btn)
Problem: v-col's minimum width creates a whitespace around the button, offcentering the card content visually. Would appreciate some help on how to either:
Make the v-col surrounding the v-btn the same width as the v-btn
Solve the layout without grid system
Big thanks for anyone thinking along!
All you have done is right, you just need to warp the <v-container> inside the <v-card-text> so that it gets a proper alignment. Also, the button in right doesn't need to have a col-2 width, it only needs a col-1 width. Since you haven't given any col width for the which wraps the button, it's taking the entire space and hence the container also. Another option is to set the width of the container using css eg: <v-container style="width:600px;">
<v-card color="grey lighten-3">
<v-card-text>
Problem: v-col with the <v-icon color="green">mdi-check</v-icon>button has min col width that off-centers the general look. How can the margins on left and right be visually equal?
<v-container> //Either give a width here style="width:600px;"
<v-row v-for="(item,i) in 5"
:key="i" class="mb-1" no-gutters justify="center">
<v-col cols="10">
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>Item</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sit amet
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
<v-col> //or set cols="1" here
<v-btn class="closeBtn mb-1 ml-1" width="36px">
<v-icon color="green">mdi-check</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
Fixed it by calculating how much width the v-col with the button needs and applied styling in-line in the v-for loop:<v-col cols="1" style="max-width:40px">. Edited pen: https://codepen.io/anzuj/pen/KKddyzy
I am using vuetify grid system to build a reply component. With column ratio of 1:11 for icon and reply column respectively. Below is the code for it
<v-row justify="center" class="ma-0 pa-0">
<v-col
id="vote-col"
cols="1"
class="pa-0 d-flex flex-column align-center"
>
<v-icon size="24">mdi-thumb-up</v-icon>
<span>{{ likes }}</span>
</v-col>
<v-col id="question-col" cols="10" class="pa-0">
<v-row class="ma-0 replyFont">
{{ reply }}
</v-row>
</v-col>
</v-row>
This looks fine on smaller screens. But as we go on the screen sizes above 1100px, even cols="1" becomes too wide and creates a lot of space between the icon column and the reply column as seen in the pictures below
How to fix v-col having more width than required? I know I can't go less than 1 for cols property. How you guys been handling this?
You could use cols="auto" to make the column the width of its content, and then no cols attribute on the other column to allow it to grow the remaining width.
<v-row justify="center" class="ma-0 pa-0">
<v-col id="vote-col" cols="auto" class="blue py-0 d-flex flex-column align-center">
<v-icon size="24">mdi-thumb-up</v-icon>
<span>0</span>
</v-col>
<v-col id="question-col" class="pa-0">
<v-row class="ma-0 replyFont">
...
</v-row>
</v-col>
</v-row>
Demo: https://codeply.com/p/pX7pin7b4L
Setting cols="X" will use Vuetify CSS class col-X which is defined like
.col-X {
flex: 0 0 YY%;
max-width: YY%;
}
where YY is computed as 100/12 * X where X is value pased to cols. X can be only whole number and minimum is 1.
That means minimum width of the column is 8.33333... percent
If you want something smaller (or fixed), you must apply your own style with max-width CSS attribute...
My vue page have a photo gallery, and when a photo is selected, the dialog will jump out by setting the selectedCard.
While the image is not fitting the size of the screen.
I tried to set css with max height or width with 100% anywhere I can, but none of them are working.
How can I fix my css so that the whole image can be view on the screen without scrolling?
Screen cap: only half of the image can be shown
//Dialog component
<template>
<v-dialog :value="selectedCard" scrollable fullscreen hide-overlay>
<v-card v-if="selectedCard">
<v-container grid-list-sm fluid>
<v-layout align-space-around row fill-height>
<v-flex id="mainCardPanel">
<v-layout align-space-around column fill-height>
<v-flex xs12>
<MyCard class="mainCard" :card="selectedCard"></MyCard>
</v-flex>
<v-flex xs12>
<v-btn> SomeButton </v-btn>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</v-card>
</v-dialog>
</template>
// MyCard component
<template>
<v-card flat tile class="d-flex justify-center" >
<v-img :contain="true" :src=card.imageUrlHiRes
:lazy-src=card.imageUrl class="grey lighten-2 Card">
<template v-slot:placeholder>
<v-layout fill-height align-center justify-center ma-0>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-layout>
</template>
</v-img>
</v-card>
</template>
Try using vh for your image height.
Perhaps this may work:
img {
height:100vh;
}
add css width and hieght to 100%
img {
width:100%;
height:100%;
}
If you want to appear full image use :cover="true" in <v-img>.
If you you want to appear the whole image, you can put follow CSS.
.v-image__image{
background-size:100% 100%;
}
This is not recommended way.Because image's ratio will be wrong.
Using pure HTML appears to even be simpler and better for me. The vuetify just complicate simple things sometimes. Use v-col, div, any block...
<v-row class="fill-height"
justify="center"
align="center"
style="background-image: url('card.imageUrlHiRes');
background-size: cover;" >
</v-row>