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
Related
Could Any one help me...I want to show cards in a carousal.In the first carousal I want three cards to be show and the second carousal I want to show only two cards. my problem is that In first carousal and second carousal total cards are shows..
<v-flex>
<v-carousel hide-delimiters style="box-shadow: 0px 0px" prev-icon>
<v-carousel-item v-for="i in 2" :key="i">
<v-layout row>
<v-flex sm4 v-for="j in color" :key="j" pl-2 pr-2>
<v-card :color="j">
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Card {{i}}-{{j}}</h3>
<div> Card text </div>
</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</v-carousel-item>
</v-carousel>
</v-flex>
<script>
export default{
data(){
return{
color: ['red','orange','green','primary','error']
}
}
}
</script
Check this codesandbox I made: https://codesandbox.io/s/stack-70202529-v4251?file=/src/components/CarouselExample.vue
I assume that's because you're trying to generate the v-carousel-item with a v-for. Do you want to generate the v-card's dinamically? If so, you'll get the text from an array? If the cards will have static text you could simply create each carousel item manually.
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>
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