I want to remove margin left and right from v-container so I add pa-0 class.
Also I need to have a space between each element so I using grid-list-sm.
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-sm class="pa-0">
<v-layout row wrap>
<v-flex v-for="i in 6" :key="i" xs4>
<img :src="`https://randomuser.me/api/portraits/men/${i + 20}.jpg`" class="image" alt="lorem" width="100%" height="100%">
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
The problem is grid-list-sm is reducing size to 4px in <v-layout row wrap> because margin -2px. and makes the v-layout to be widther than his parent.
I do not want to use overflow-x:hidden. I just want the elements to align correctly.
So, how I can solve this problem? (without workaround)
You can overwrite the attribute in the class where you are using it, as follows, it is overwritten in the css file of your class, or you can make a css file with the code and include it in each class where you need it
.row{
margin-right: 0px
}
Related
I have a container with display: flex, and it childs height, is higher than it content.
I'm using Vuetify (vuejs)
For example:
I have a v-col with 2 span
<v-col style="display:flex;flex-direction:column">
<span style="background-color:green;font-size:0.4rem">134 POSTS</span>
<span style="background-color:green;font-size:0.4rem">120 POSTS</span>
</v-col>
If I put flex-direction to column, then:
height of spans is greater than it content!
If I put flex-direction to row, then:
the same happens.
I expect that the span height is only his content height
Edit:
I try again and the problem is only when I try to put inside display flex column inside a card: here is the code to try in vuetify
<v-card>
<v-card-title>
<v-row>
<v-col class="d-flex" style="flex-direction: column">
<span style="font-size: 0.6rem"> 123123 </span>
<span style="font-size: 0.6rem"> 123121 </span>
</v-col>
</v-row>
</v-card-title>
</v-card>
Solution:
I found the solution, v-card-title have a class with line-height, the solution is edit this line-height
In Vuetify, v-card-title class has a line-height: 2rem set by default, editing this one fixed the issue!
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 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.
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>
When looking at the following Vuetify code
<v-layout align-center justify-center row fill-height>
<v-flex xs1>
<v-icon color="primary">clear</v-icon>
</v-flex>
<v-flex xs8>
<p>Text</p>
</v-flex>
<v-flex>
<v-btn rounded color="primary">Do Something!</v-btn>
</v-flex>
</v-layout>
(for more context:
https://codepen.io/anon/pen/xNvzbQ)
"Text" is not vertically centered
But when replacing
<v-flex xs8>
<p>Text</p>
</v-flex>
with
<v-flex xs8>
Text
</v-flex>
it suddenly is.
I also could not center it with align-items: center or align-content: center in the surrounding div.
Whats the reason behind this behavior?
It IS actually centering the p tag. Like other's has pointed out. The p tag has a default bottom margin, so it just makes it look as if it's not centered vertically.
See below image, where the orange highlight is actually the bottom margin of the p tag.
Notice how it's actually vertically centered.
So, you can fix this by either:
Remove the p tag altogether like you said
Use div tag instead, which doesn't have a margin
Just set the style of the p tag to have margin-bottom: 0