"Hidden" css class and style "display: none;" are not working with carousel

[picarsite]

Software version

Quasar: 0.14.1
OS: Windows 10 x64
Node: /
NPM: 5.3.0
Browsers: Firefox 55.0.2 x32
iOS: /
Android: /

Any other software related to your bug:
/

What did you get as the error?

The div of the carousel should not be visible to the user and not taking space. The error here is, that the div is still taking space (empty and white). I can swipe to the empty white space.

What were you expecting?

The div should be in the DOM, not visible to the user and NOT taking white space.

What steps did you take, to get the error?

Using the "hidden" class for a div in a Carousel component. The same happens with the style attribute "display: none;".

Template / component:

<template>
<q-carousel ref="myCarousel" :arrows="true" class="fullscreen">
	<!-- slider one -->
	<div slot="slide" class="bg-green centered">
	</div>
	<!-- slider two -->
	<div slot="slide" class="bg-red centered hidden">
	</div>
	<!-- slider three -->
	<div slot="slide" class="bg-blue centered">
	</div>
</q-carousel>
</template>

<script>
import {
  QCarousel
} from 'quasar'

export default {
  name: 'index',
  components: {
    QCarousel
  },
  data () {
    return {
    }
  }
}
</script>

[rstoenescu]

Please supply with a template and explain what you are trying to do. Thanks.

[picarsite]

Updated my first post. Normally the second slider should be invisible for the user but in the DOM. When you run the code, you will see that the red slider is taking white space and you can swipe to it.

It would be great if the bug could be fixed fast. I promise, your next coffee or beer will be payed by me via PayPal! : -)

[rstoenescu]

QCarousel is not supposed to work like this.
Instead, use "v-if" on the slide you want to hide.

Wish you could join the Patreon list, Quasar is in dear needs of funds at the moment: https://www.patreon.com/quasarframework

[picarsite]

When I use "v-if", how I can reference that element?
"this.$refs.refName" and "document.querySelector('#myElement')" does not work. Either it's undefined or null. How can I reference that slide after it was added to the DOM with "v-if"?

[rstoenescu]

Two questions:

1. Why do you need the ref it if you don't want to display it?
2. I am getting the feeling you are not using the full power of Vue? Use Vue instead of manipulating the DOM by yourself.

[picarsite]

Well, I'm using WebRTC (peer to peer webcam and audio streams) with Vue.js and the carousel component. In the slide, I have two divs. One with my stream and the second one with the stream of my chat partner. I just want to display the slide, with that streams, only when there is already a connection between me and my chat partner. If there is not a connection between us, the slide has to be invisbile. I need to set the source of the divs with the streams of my WebRTC connection and that is possible when I can reference the div elements, only.

[rstoenescu]

You can still use "v-if". You will probably have some logic somewhere to determine when's the moment to show that slide or not. When you need to show it, turn the variable binded to v-if to "true" then initialize the rest of the things...

this.showSlide = true
// then let Vue update the DOM:
this.$nextTick(() => {
   ... access the ref, do stuff ...
})

[picarsite]

Thank you, it works! But why I have to use the "nextTick" function? Why I can not just use "v-if", watch for changes and set the "srcObject" of the video html element after the watched variable changes to true? If I do so, the element can not be found in DOM. Why does it work with "nextTick" function, only?

[rstoenescu]

Because you need to allow Vue to handle the scope changes (setting showSlide to true) so the Vue reference becomes available before you can do stuff with it.