javascriptpdftron

PdfTron with multiple documents: Hide header items (multitab)


WebViewer 10.x / PdfTron

WebViewer can display multiple (PDF) documents since 8.x. Like so:

WebViewer({
    //disabledElements: ["toolsHeader", "header"],
    initialDoc: ["first.pdf", "second.pdf"]
  }, viewerDiv)...

What we see is: enter image description here

I would like to keep the multi tabs to switch between documents (marked green in the screenshot), but I want to remove the header items below (marked red). I tried my best to disable features or elements using instance.UI.disableFeatures(...) and instance.UI.disableElements(...), but I didn't succeed without breaking the UI or removing both multitabs and header items. https://docs.apryse.com/api/web/UI.html#.FeatureFlags__anchor

How do I keep the multitabs (TabsHeader) open, but remove the header items below completely? Can it be done using disableFeatures|Elements or is there another way?

Thanks

Updated as a response to Jacobs answer:

WebViewer({
  initialDoc: ["first.pdf", "second.pdf"],
  css: 'multitab.css'
}, viewerDiv)...
// multitab.css
div[data-element="header"], .HeaderToolsContainer {
  display: none;
}

OR

WebViewer({
  initialDoc: ["first.pdf", "second.pdf"],
  ui: 'beta',
  disabledElements: ['default-top-header']
}, viewerDiv)...

Solution

  • I'm Jacob from the WebViewer Support team.

    I believe you should have been able to call disableElements on 'header' and it should not have removed the multi-tabs. I was also able to reproduce this issue. I've raised this to our Development team to add to our Defect Backlog to investigate further.

    In the meantime, you can remove the header without removing the multi-tabs by calling display: none on the element. You can find our recommended way for doing so here: https://docs.apryse.com/documentation/web/guides/customizing-styles/#changing-css-properties The code would look like this:

    div[data-element="header"] {
      display: none;
    }
    

    Alternatively, you can use our Modular UI, which I've confirmed you can use disableElements on 'default-top-header’ without removing the multi-tabs. You can find out how to enable our modular UI here: https://docs.apryse.com/documentation/web/guides/modular-ui/getting-started/#how-to-use

    Sample image of the header removed in WebViewer Modular UI

    Let me know if this helps!