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!
Related
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'm trying to add some custom CSS to the .v-responsive__content element within the Vuetify JS card component. I've looked online and can't seem to find a slot for this, I need to set the z-index value of this element manually as I'm using a ::before on the v-card component to add a background overlay.
I'm having some troubles with targeting this, can someone help/advise?
<v-card
class="mx-auto mb-8"
max-width="375"
>
<v-img
class="white--text align-end"
height="200"
:src="source"
>
<v-card-title class="pb-0 mb-n1">Title</v-card-title>
<v-row>
<v-col cols="8">
<v-card-subtitle class="white--text text-truncate py-0">Subtitle</v-card-subtitle>
</v-col>
<v-col class="text-right">
<v-chip
class="chip-custom chip-custom--primary ma-0 mr-4 mt-n2"
color="primary"
text-color="white"
small
>
text
<v-icon right small class="ml-1">mdi-star</v-icon>
</v-chip>
</v-col>
</v-row>
</v-img>
</v-card>
You should be able to access it like this
Add custom class to vuetify component
<v-img
class="white--text align-end custom-image-class"
height="200"
:src="source">...</v-img>
Add Css (sccs syntax here)
.custom-image-class{
.v-responsive__content{
border: 1px red solid;
}
}
It looks a bit weird that you want to add html content within the v-img. If you want the image as background image I would not recommend the v-img component as it is.
I usually use inline style for z-index
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.
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...
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
}