Plugin do not render properly

[Torone]

I have 3 tabs and in each tabs I have images of different categories. The first tab is totally fine, the images are ordered correctly; on the second and third tabs the plugin do not fire. As soon as I edit a little the window size it get rendered correctly.

If think this is happening because the images are "hidden" behind the tabs and so, is there a way to let it render programmatically?

[b4dnewz]

can you post some pseudo code to illustrate better your situation? so I can better understand how the plugin is used in your setup

[Torone]

I'm using Nuxt 2.9 and Vuetify 1.x. This is a pseudo code of it. Images in tabs are correctly shown only on the first tab. Thanks for help.

<template>
  <div>
    <v-tabs>
      <v-tab
        v-for="n in 2"
        :key="n"
        ripple
      >
        Item {{ n }
      </v-tab>
      <v-tab-item>
        <vue-justified-layout
            :items="photos"
          >
            <template slot="inner" slot-scope="slotProps">
              <!-- all good here -->
            </template>
         </vue-justified-layout>
      </v-tab-item>
      <v-tab-item>
        <vue-justified-layout
            :items="photos"
          >
            <template slot="inner" slot-scope="slotProps">
              <!-- images are not using justified layout here -->
            </template>
         </vue-justified-layout>
      </v-tab-item>
    </v-tabs>
  </div>
</template>

<script>
import VueJustifiedLayout from 'vue-justified-layout'

export default {
  components: {
    VueJustifiedLayout
  },
  data() {
    return {
      photos: [...]
    }
  }
}
</script>

[b4dnewz]

ok, after a quick look I can say it does not render correctly because the justified layout script depends on a fixed (or simply known) container width, when the tabs are unrendered or hidden they has no width.

for a quick fix you can pass the options object prop to the component with a known container width, this will solve your issue until I fix the code and publish a new release I guess

[Torone]

Thanks for the hint. I just tried, it seems to work on loading, but it lose responsiveness. I will try to find a workaround unless a proper fix will be released.

[b4dnewz]

try to use the sync modifier on the options props so when the page is resized it will update the container width option accordingly and your initial width will not override it

[Torone]

Can you please provide an example because I don't see this option available on Flickr documentation... Thanks!

[b4dnewz]

I meant vue sync modifier on your :options.sync="myOptions" prop this will update whatever you initially entered as containerWidth when resizing

[b4dnewz]

After thinking a little bit I realised that is not a issue for the plugin itself since justified-layout module needs a known containerWidthto work and it's up to the user to specify it, also is a common practice to set fixed sizes instead of percentages when dealing with code that depends on measures, since when hidden are usually set to 0px if not explicitly defined.

When not manually specified via the options the plugin detects the containerWidthof it's parent while mounted but when the element or the parent is not visible in the DOM it has no actual known starting width and the element is already mounted so the event won't fire again.

This is a error that happens only when using v-show since the element is hidden with style instead of being actually removed from the page.

Listening for visibility change it's out of the scope of this plugin and I would like to keep it as simple as possible.

I hope my motivations are shared and appreciated, if you have any other comments, please comment as well, even if I close the issue.