How to I can make block "pink-box", placed on rest of height in Vuetify grid system? "height: 100%" work incorrect. Column flex direction and "flex: 1" break xs6 layout.
<div id="app">
<v-app>
<v-content>
<v-container grid-list-md fill-height>
<v-layout row wrap align-content-start>
<v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
<v-flex xs12 class="pink-box">Rest height box</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
See worked code snippet on Codepen:
https://codepen.io/profsoft/pen/wmQRvm
We must use in container two nested layouts.
First - column, for text block and rest height box.
Second, nested - row wrap, for correct 12 point grid system placed in text block.
<div id="app">
<v-app>
<v-content>
<v-container grid-list-md fill-height>
<v-layout column>
<v-flex>
<v-layout row wrap align-content-start>
<v-flex xs6 v-for="x in 10">Text: Example {{x}}</v-flex>
</v-layout>
</v-flex>
<v-flex xs12 class="pink-box">Rest height box</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
See solution code snippet on Codepen:
https://codepen.io/profsoft/pen/KoLMrz
Related
My component separated to two parts (leftPanel and rightPanel).
When the app start, only leftPanel will be shown, and take up the whole screen width (using xs12).
If user click the button, the left panel will be shown, and rightPanel will resize to xs6 to take up half of the screen.
The functionality here is working well, but I would like to add animation(transition) when the panels size are changing.
I tried to add with different css, but none of them are showing animation.
<template>
<v-container grid-list-sm fluid>
<transition name="MyPanel">
<v-layout align-space-around row fill-height>
<v-flex id="leftPanel" :xs6="!showRightPanel" :xs12="showRightPanel">
<v-layout align-space-around column fill-height>
<v-flex xs12>
<v-btn v-if="extendable" #click="openRightPanel"> show more information </v-btn>
</v-flex>
</v-layout>
</v-flex>
<v-flex id="rightPanel" v-if="showRelatedCard" xs6>
<v-layout align-space-around column fill-height>
...
</v-layout>
</v-flex>
</v-layout>
</transition>
</v-container>
</template>
<script>
export default {
...
data() {
return {
showRightPanel : false
}
},
methods: {
removeLargeImage() {
this.showRightPanel = !this.showRightPanel;
}
}
};
</script>
<style scoped>
...
</style>
If you're using an v-if statement it is not possible to solve with CSS. As the element isn't rendered at all. Setting the width initially to 0 or using v-show you probably could solve it with CSS, but I would recommend to look to the vue-transitions: https://v2.vuejs.org/v2/guide/transitions.html
Maybe also to https://vuetifyjs.com/en/styles/transitions with I wonder if you could solve yout problem with the vuetify transitions
In my application, the results page is composed of three blocks :
left : summary of the search
middle : results
right : map of the results
I don't know how to fix the position (position: fixed) of the left and right blocks with Vuetify.
My goal is to keep the left and right blocks displayed while scrolling the list of results (in the middle).
<v-content>
<v-container style="max-width:1264px" class="pa-0">
<v-layout row wrap>
<v-flex xs12 sm5 md3 class="">
<div style="background-color:red;color:white;height:300px">SEARCH FIXED</div>
</v-flex>
<v-flex xs12 sm7 md4 class="pt-3 pa-2 green">
RESULTS:<br/> ...
</v-flex>
<v-flex class="" xs12 md5>
<div style="background-color:blue;color:white;height:200px">MAP FIXED</div>
</v-flex>
</v-layout>
</v-container>
</v-content>
Here is the codepen of my application
As the title states, I have a component that opens a dialog. The dialog contains a card with a toolbar at the top and a form within the card. I am trying to make the toolbar fixed such that it does not disappear when scrolling. I have tried to add the "fixed" attribute to my toolbar but doesnt seem to give me the results I expect. Below is my code and thanks in advance...
<template>
<v-dialog :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-toolbar fixed flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-form ref="form">
<v-container>
<v-layout row wrap>
<v-subheader class="">
Section
</v-subheader>
<v-flex xs12 v-for="n in 20">
<v-text-field
label="Field Name"
outline
>
</v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For me this is work (Vuetify version 2)
Add scrollable prop in <v-dialog>
inside <v-card> use <v-card-title> instead of <v-toolbar>
then your <v-toolbar> put inside <v-card> and remove fixed prop in <v-toolbar>
Last, add class="pa-0" in <v-card-title> for removing the padding in v-card-title element
<template>
<!-- Add Scrollable Prop -->
<v-dialog scrollable :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-card-title class="pa-0">
<v-toolbar flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
</v-card-title>
...
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For browsers that support position: sticky (https://caniuse.com/css-sticky), you can use pure CSS to set the toolbar to be sticky positioned at the top:
.v-dialog > .v-card > .v-toolbar {
position: sticky;
top: 0;
z-index: 999;
}
You could write this selector differently if you didn't want this applying to all situations where this occurs in your application - add a specific class to your toolbar, for example.
In my case, fixed title was not working until I did not wrap my div in v-card-text
<template>
<v-dialog v-model="modal" scrollable fullscreen>
<v-card>
<v-card-title>
<span>Title text</span>
</v-card-title>
<!-- VCardText after VCardTitle -->
<v-card-text>
<div>
...
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
PS. the Vuetify semantic is very important for correct working all of features (ex. using v-card-actions in v-card instead of custom div)
Vuetify uses a 12-point grid system. Since 12 is not divisible by 5, how does one create a grid with 5 columns of the same width? The 5 columns should take all available space.
What's the most "correct" way to do this?
EDIT:
I tried to implement John M's comment, but it doesn't fill up all the available horizontal space:
<v-container>
<v-card color="red">
<v-layout wrap align-content-space-around text-xs-center>
<v-flex xs1></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
<v-flex xs1></v-flex>
</v-layout>
</v-card>
</v-container>
I want the red areas to be gone:
I needed a five columns layout too, and I found something that's working for me. I needed the five columns layout for lg screens, so I added these rules in my css:
https://codepen.io/rekam/pen/JmNPPx
/* vuetify lg min breakpoint: 1280 - 16 = 1264px */
/* vuetify lg max breakpoint: 1920 - 16 - 1 = 1903px */
#media (min-width: 1264px) and (max-width: 1903px) {
.flex.lg5-custom {
width: 20%;
max-width: 20%;
flex-basis: 20%;
}
}
You need to specify min and max in media query, because of you don't, the 20% rule will apply for all sizes. And simply use it in your template like this:
<!-- md4 is just here as an example -->
<v-layout row wrap>
<v-flex md4 class="lg5-custom">box 1</v-flex>
<v-flex md4 class="lg5-custom">box 2</v-flex>
<v-flex md4 class="lg5-custom">box 3</v-flex>
<v-flex md4 class="lg5-custom">box 4</v-flex>
<v-flex md4 class="lg5-custom">box 5</v-flex>
<v-flex md4 class="lg5-custom">box 6</v-flex>
<v-flex md4 class="lg5-custom">box 7</v-flex>
</v-layout>
What i needed was 5 column grid after medium display size
i wrote a inline style with a breakpoint condition
<v-row>
<v-col v-for="n in 10"
:style="$vuetify.breakpoint.mdAndUp ? ' flex: 1 0 18%;' : ''"
cols="6"
sm="3" >
{{items inside each column}}
</v-col>
</v-row>
Does the content have to be in a card component? I'm asking because it wasn't specified in your question. If it isn't, you can accomplish this by removing the card component and replacing/adding some props to your container and layout components.
<div id="app">
<v-container align-center text-xs-center>
<v-layout justify-center>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">1</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">2</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">3</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">4</v-card-text></v-card></v-flex>
<v-flex xs2><v-card color="blue"><v-card-text class="px-0">5</v-card-text></v-card></v-flex>
</v-layout>
</v-container>
</div>
Instead of specifying the cols number <v-col cols="12"> write xl="auto"
<v-col xl="auto">
I'm trying to use a vertical space-between on my components, or at least use the flexbox capabilities of the framework.
Here is what I want to achieve with an image, the first image represents what I have with my current code and the second is what I want to achieve:
Here is the basic markup I wrote, I reproduced it on a jsFiddle if you want to play with it: https://jsfiddle.net/tgpfhn8m/357/
<v-layout row wrap>
<v-flex xs8>
<v-card class="red" height="400px">
Fixed Height Card
</v-card>
</v-flex>
<v-flex xs4 class="purple">
<v-card class="green">
First Card
</v-card>
<v-card class="green">
Second Card
</v-card>
</v-flex>
</v-layout>
What did I try?
I tried various methods. The first one was to include a v-layout:column into the second column, and apply a justify-space-between to it. Without success (https://jsfiddle.net/tgpfhn8m/358/):
<v-flex xs4 class="purple">
<v-layout column justify-space-between>
<v-card class="green">
First Card
</v-card>
<v-card class="green">
Second Card
</v-card>
</v-layout>
</v-flex>
I tried a lot of other combinations of elements and properties, without success either.
What am I doing wrong? Is it even possible to achieve what I want with native Vuetify elements?
You have to delete the middle v-flex.
You can also use align-end on a v-layout with the last card in it.
If you want to keep padding between the two columns, you can add class pr-x with x a number between 0 and 5 to the first v-flex.
To keep the second column filling the height use fill-height on the v-layout wrapped in a v-flex.
Fiddle with padding
Spacing doc from Vuetify
Code answer :
<v-app>
<v-layout row wrap >
<v-flex xs8 class="pr-3">
<v-card class="red" height="400px">
Fixed Height Card
</v-card>
</v-flex>
<v-flex >
<v-layout column justify-space-between class="purple" fill-height>
<v-card class="green">
First Card
</v-card>
<v-card class="green">
Second Card
</v-card>
</v-layout>
</v-flex>
</v-layout>
</v-app>
For anyone else who needed this advice:
Use <v-layout align-center> together with <v-flex fill-height>
This vertically aligns the children:
<v-layout align-center>
<v-flex fill-height></v-flex>
<v-flex fill-height></v-flex>
</v-layout>