Zooming creates issues with centering of the document

[sushi2all]

Thanks so much for your work @hrynko!

I'm having issues with a zoom feature, which essentially increases or decreases the width of the document by a given factor.

It works in the sense that the document does zoom in/out, but when the width gets larger than the container the document can be scrolled to its end on the right, but it gets cut on the left, I can scroll to the end of it.

Any idea of why this happens?

I'm using Vue3 with Quasar framework. Here's the code:

<template>
  <!-- This is one of my own custom component --> 
  <BaseModalScreen :show="show" @close="$emit('close')">

    <template #header>
      <div class="q-ml-md q-py-xs medium highlight">
        {{ media_name }}
      </div>
    </template>

    <template #content>
      <div class="fit flex flex-center" style="background-color: ;">
        <q-img fit="contain"
          v-if="hasImageExtension()"
          :src="media_src">
        </q-img>

        <!-- HERE IS THE PDF PART -->
        <vue-pdf-embed
          v-else
          disableTextLayer
          ref="pdf"
          :source="media_src"
          :width="doc_width">
        </vue-pdf-embed>

        <!-- ZOOM IN/OUT BUTTONS -->
        <q-page-sticky position="top-right" :offset="[35, 0]">
          <div class="column q-gutter-md">
          <q-btn
            round
            padding="sm sm"
            icon="mdi-magnify-plus-outline"
            class="shadow-12"
            color="grey"
            @click="zoomIn">
          </q-btn>
          <q-btn
            round
            padding="sm sm"
            icon="mdi-magnify-minus-outline"
            class="shadow-12"
            color="grey"
            @click="zoomOut">
          </q-btn>
          </div>
        </q-page-sticky>
      </div>
    </template>

  </BaseModalScreen>
</template>

<script>
import VuePdfEmbed from 'vue-pdf-embed'
import BaseModalScreen from '@/components/BaseModalScreen.vue'

export default {

  name: 'MediaViewer',

  components: {
    BaseModalScreen,
    VuePdfEmbed
  },

  props: ['show', 'media_name', 'media_src'],

  data() {
    return {
      image_extensions: ['png', 'jpeg', 'jpg'],
      doc_width: 800,
    }
  },

  methods: {
    hasImageExtension() {
      // Source can be either image or pdf. Figures out which it is
      return this.media_src
        ? this.image_extensions.some( e => this.media_src.endsWith(e) )
        : null
    },

    zoomIn() {
      this.doc_width = this.doc_width * 1.2
    },

    zoomOut() {
      this.doc_width = this.doc_width / 1.2
    }
  },

  created() {
    this.doc_width = Math.min(this.$q.screen.width * .8, 1200)
  }
}
</script>

<style lang="css">
.vue-pdf-embed > div {
  margin-bottom: 8px;
  box-shadow: 0 2px 8px 4px rgba(0,0,0,.1);
}
</style>

[hrynko]

Hi @sushi2all,

I assume some problems with the wrapper, although I can't be sure without knowing your environment. Could you maybe prepare a sample in some online editor?

[sushi2all]

Hi @hrynko, sorry for the late reply. It was indeed an issue with the wrapper.

I won't be pasting the updated code since it uses my own Vue components and would make little sense to others, but to make a long story short, I added an absolute positioned div right outside the actual wrapper div and the issue disappeared.

Closing the issue.