div "container" overflow:hidden prevents horizontal scroll

[dfidler]

I'm trying to implement a pdf viewer with thumbnails (which works) except I can't get it to scale properly in such a way that i can enable horizontal scroll.

It looks like the "overflow: hidden" in the "container" div is the culprit. I'm not the best Vue developer on earth so maybe there's a way that I can use some scoped styling to override that but so far, sending in classes and styles to VuePDF aren't helping. I can see that the container is being used to define --scale-factor but does it really need overflow: hidden?

I can enable horizontal scroll the moment I remove container.{overflow: hidden} (in dev tools) But maybe I'm just missing something really basic.

vue-pdf/src/components/VuePDF.vue

Lines 297 to 299 in 86ae153

	<template>
	<div ref="container" style="position: relative; display: block; overflow: hidden;">
	<canvas dir="ltr" style="display: block" role="main" />

Additional context

• vue-pdf: 1.9.5
• vue: 3.4.19
• tailwindcss: 3.4.1

[kazuki-komori]

Hi, @dfidler !

I have the same issue when I use this component.

My temporary solution is as follows, using :style="{ overflow: 'visible' }":

<VuePDF
  :style="{ overflow: 'visible' }"
  :pdf="pdf"
  :page="page"
/>

[dfidler]

But.. but.. I tried that! 🤣 Actually, I tried...

<VuePDF
   :pdf="pdf"
  :page="page"
  text-layer
  class="!flex !justify-center"
  :key="vuePdfKey"
  :scale="scale"
  style="overflow: visible;"
 />

... which is basically the same thing... and it wasn't working ... until I tried yours and it worked and it blew my mind so I put mine back (like above) and it works now. 🤦

I don't get it. The overflow value would "take" on first load but then when I started scaling it would get overwritten... but I looked at the code and couldn't figure out how it was getting set again because I couldn't see where it was getting added in the code.

Anyway, looking at the above, I wouldn't believe me either so... I dunno, I must have been doing something stupid. Maybe I just needed some sleep. ☹️

Clearly I need to find a vocation more suited to my capabilities - anyone know of any jobs involving staring at a blank wall all day?🤣

Thanks for the help. 😄

[kazuki-komori]

Hahaha, looks tricky 😃

This is an article in Japanese, but it might be of some help!

https://qiita.com/kata-n/items/1c52516cd345a3955b9b#3-%E4%B8%80%E9%83%A8%E3%81%AE%E6%A9%9F%E8%83%BD%E3%81%A0%E3%81%91%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%81%AB%E3%82%88%E3%82%8A%E6%8C%AF%E3%82%8B%E8%88%9E%E3%81%84%E3%81%8C%E9%81%95%E3%81%86

From this article, in Vue 3.x, the second property override the first property.

btw, it's the opposite specification in Vue 2.x. 🤣

<!-- template -->
<div id="red" v-bind="{ id: 'blue' }"></div>
<!-- result -->
<div id="blue"></div>

<!-- template -->
<div v-bind="{ id: 'blue' }" id="red"></div>
<!-- result -->
<div id="red"></div>

[TaTo30]

There were some issues with the overflow in the early versions but they are all fixed now so overflow:hidden is not needed anymore. 😅

Thank you! @kazuki-komori for the support there.

[dfidler]

Amazing! Thanks to both of you 👍