Vuetify - how to make sticky elements? - vuetify.js

I'm new to Vuetify (first project ever) and I'm trying to set a card inside a column sticky top. Unfortunately is not working as supposed. I've also tried using the v-scroll directive from vue-sticky-directive and the result is still the same.
Here the simplified snippet:
<v-row>
<v-col class="sticky-container">
<v-card class="sticky-card">This should be sticky top 90px</v-card>
</v-col>
<v-col>
content
</v-col>
</v-row>
.sticky-container{
overflow-y: auto;
}
.sticky-card{
position: sticky;
top:90px;
align-self: start;
}
I know I can achieve a similar result using position:fixed, but the behavior is different and the final result is not the one I'm looking for.
Did someone already faced this issue and have a some insights to share with me?

To achieve this you need to set position to fixed. As fixed is a kind of absolute positioning you can than set the top position via top: 90px -
and with fixed positioning you'll loose all fluid features of that card as well as the centering. For instance max-width won't work so you have to use width instead and center by yourself.
<div id="app">
<v-app id="inspire">
<v-row>
<v-col cols="12">
<v-card
class="mx-auto sticky-card"
max-width="344"
color="primary"
>
<v-card-text>
<b>This should be sticky top 90px</b>
</v-card-text>
</v-card>
</v-col>
<v-col>
<v-card
class="mx-auto after-sticky"
max-width="344"
>
<v-card-text>
Card with much content - past large text inside of it
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-app>
</div>
CSS:
.sticky-card {
width: 344px;
position: fixed;
top: 90px;
z-index: 1;
/* centering */
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
.after-sticky {
margin-top: 90px;
}

This works for me(pug syntax):
v-row(no-gutters)
v-col(sm='0' md='0' lg='1')
div(position: -webkit-sticky; position: sticky; top: 100px')

Related

How do I make a horizontal slider in a table without moving text?

Please help me with the tables in vuetify.
I need to limit the width of the table, and remove text wrapping. I need a horizontal slider.
codepen
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1 max-width-test"
></v-data-table>
</v-app>
</div>
.max-width-test{
max-width: 900px
}
The css method helped me: white-space: nowrap;
Codepen
.max-width-test{
max-width: 900px;
white-space: nowrap;
}

vuetifyjs form label location

I can't arrange vuetify form label location. Below is my code:
<template>
<v-container>
<form #submit.prevent="signup">
<v-col>
<v-text-field
v-model="form.name"
label="Хэрэглэгчийн нэр"
type="text"
required>
</v-text-field>
</v-col>
</form>
</v-container>
</template>
The result looks in the below figure:
Is this label available look on the left?
Try to override rtl style in labels by adding your custom style
<style>
.v-label {
left: 0 !important;
right: auto !important;
}
</style>
Thi would make ALL labels move to left. If you want to apply this only on some inputs:
<style>
.ltrLabel label {
left: 0 !important;
right: auto !important;
}
</style>
And on the inputs you want the label to be on the left:
<v-text-field
v-model="form.name"
label="Хэрэглэгчийн нэр"
type="text"
class="ltrLabel" <--- add ltrLabel class
required>
</v-text-field>

How to prevent <v-responsive> from growing with content?

In my Vue.js application (with vuetify) I want a v-sheet with (√2)/2 aspect ratio (width/height = (√2)/2).
In this v-sheet, I have some content that can grow but I don't want the v-sheet to grow with its content.
According to vuetify documentation, aspect-ratio :
"Sets a base aspect ratio, calculated as width/height. This will only set a minimum height, the component can still grow if it has a lot of content."
I did some tests with codepen and came up with this POC (working better with chrome, firefox does not always respect the ratio but thats another issue) : https://codepen.io/Achaaab/pen/zYOpmbJ.
<v-app id="app">
<v-content fill-height>
<v-container fill-height fluid>
<v-row>
<v-col cols="6">
<v-sheet tile elevation="4">
<v-responsive aspect-ratio="0.707">
<div class="sheet-content">
<div class="header"></div>
<v-textarea class="body" auto-grow hide-details></v-textarea>
<div class="filler"></div>
<div class="footer"></div>
</div>
</v-responsive>
</v-sheet>
</v-col>
<v-col cols="6">
<v-sheet tile elevation="4">
<v-responsive aspect-ratio="0.707">
<div class="sheet-content">
<div class="header"></div>
<div class="body" :style="bodyStyle"></div>
<div class="filler"></div>
<div class="footer"></div>
</div>
</v-responsive>
</v-sheet>
<v-slider v-model="height" min="0" max="150" label="body height %"></v-slider>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
height: 20
}
},
computed: {
bodyStyle() {
return "height: " + this.height + "% !important";
}
}
})
.sheet-content {
height: 100%;
padding: 8px;
display: flex;
flex-direction: column;
}
.sheet-content > .header {
width: 100%;
height: 10%;
background-color: #C0C0C0;
flex: 0 0 auto;
}
.sheet-content > .body {
width: 100%;
margin: 0px;
padding: 0px;
background-color: #E0E0E0;
flex: 0 0 auto;
}
.sheet-content > .filler {
width: 100%;
flex: 1 0 auto;
}
.sheet-content > .footer {
width: 100%;
height: 10%;
background-color: #C0C0C0;
flex: 0 0 auto;
}
I made 2 sheets, the left one contains a v-text-area that can grow.
The right one contains a div that can grow up to 150% with a slider.
Surprisingly, the right sheet does not grow with content.
According to vuetify documentation, the left sheet grows with content.
How can I have the same behavior on the left sheet ? (some kind of overflow: hidden).

Image hover with logo

I've been playing around with a css hover effect but I cannot figur out how I get the greyscale to work.
The hover effects works fine when hovering the "bg" image but when the cursor hits the "logo" image the greyscale of the "bg" stops.
I would like to have it working so only the "bg" is greyscale on hover and not the logo.
You can see it here http://codepen.io/Tonzr/pen/dNqVQQ
The HTML
<div class="container">
<div class="row">
<a href="" class="col-md-6">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample36.jpg" class="bg">
<img src="http://placehold.it/200x90/000000?text=LOGO" class="logo">
</a>
<a href="" class="col-md-6">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample83.jpg" class="bg">
<img src="http://placehold.it/200x90/000000?text=LOGO" class="logo">
</a>
</div><!-- END ROW -->
</div><!-- END CONTAINER -->
And here is the SASS
.col-md-6
position: relative
overflow: hidden
width: 100%
height: 25rem
padding: 0
.bg
position: absolute
left: 50%
top: 50%
height: auto
width: 100%
-webkit-transform: translate(-50%,-50%)
-ms-transform: translate(-50%,-50%)
transform: translate(-50%,-50%)
&:hover
-webkit-filter: grayscale(90%)
filter: grayscale(90%)
.logo
position: absolute
top: 50%
left: 50%
margin-right: -50%
transform: translate(-50%, -50%)
Thanks for your time.
Solution: http://codepen.io/anon/pen/YNOEMq
.col-md-6
position: relative
overflow: hidden
width: 100%
height: 25rem
padding: 0
&:hover .bg
-webkit-filter: grayscale(90%)
filter: grayscale(90%)
...
The problem is, if the cursor enters the logo element, the hover event propagation will not reach the bg element as they are siblings. So the solution is to catch the hover event at the parent anchor element, then affect the child bg.

Center image in body with fullpage.js

Due to SEO reasons I put my images into the body section rather than as background pictures like so:
<div id="fullpage">
<div class="slide" ><img class="l-cover" data-src="imagelink1"></div>
<div class="slide" ><img class="l-cover" data-src="imagelink2"></div>
<div class="slide" ><img class="l-cover" data-src="imagelink3"></div>
</div>
I tried to style the images like here:
https://jsfiddle.net/gnq52ygu/
I want the pictures to center, when the screen gets smaller. Right now the pictures stay fix at the left side.
As soon as I style the img tag there's some conflict with fullscreen.js.
Can anyone help me please?
Perfectly center? Both horizontally and vertically? This can be done like so:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Resources