ThumbnailPanel is sized to 100% width of WebViewer width when WebViewer width is < 640px

Product: WebViewer

Product Version: ^7.3

When decreasing the width of the WebViewer to 640px or less with sidePanel opened. The SidePanel claims 100% width and document is not show.

When the width of the WebViewer is more than 640px the SidePanel and document are shown.


The <div/> with the class virtualized-thumbnails-container has an inline-style which sets the width to 243px. Besides this inline style, wrapping elements have media queries which trigger at 640px.

When decreasing the width of the WebViewer to less than 640px the SidePanel is resized to full with and overlaps the document.

The inline style of the <div/> with the class virtualized-thumbnails-container changes to width: 611px.

Since inline (React css module?) styling is used, it seems not possible to change this behaviour.
Also since viewing the document has preference to viewing thumbnails this seems to me add behaviour.

Can be reproduced in the Webviewer demo; https://www.pdftron.com/webviewer/demo/

  • Open document
  • Open sideDrawer (Panel)
  • Open Browser Developer Tools
  • Enable Device Toolbar and set device width to 670px or less.

Hi,

When browser width is less than 640px, the mobile/tablet CSS styling will be turned on. The full-width thumbnail panel is in mobile styling. You can use this API to enable desktop only mode on WebViewer UI. This means that at small browser width/height, mobile/tablet CSS styling will not be applied.

Thanks.

Wanbo

Hi Wandbo,

The namespace UI is not available in the instance, PDFNet, CoreControls, Annotations etc. are availble. But UI is not. We are still on 7.3.3

Cheers,
Peter

Hi,

I think that API is not available in v7.3 unfortunately. Could you try upgrade to latest version?

Thanks.

Wanbo

Hi Wanbo,

Upgraded to PDFTron 8.1 and can switch to DesktopModeOnly.

Cheers,
Peter

Hi Peter,

Nice :+1:

Wanbo