Position side panel on right side

[Matt Parizeau]

Q:

Is it possible to put the sidePanel at the right position instead of the left?

A:

To position the sidePanel on the right side you just need to make a couple small modifications to ReaderControl.css and ReaderControl.js.

In ReaderControl.css add the style "right: 0" to the #sidePanel rule.

In ReaderControl.js find the shiftSidePanel function and change margin-left to margin-right.

[Matt Parizeau]

With the new UI in WebViewer 4.0 you can follow these steps:

Use the "css" option in the PDFTron.WebViewer constructor to load your own custom CSS file. For example:

var myWebViewer = new PDFTron.WebViewer({
  css: 'custom.css',
  ...
});

Inside custom.css

.LeftPanel {
  left: unset;
  right: 0;
}

.LeftPanel.closed {
  transform: translateX(100%);
}

.DocumentContainer.left-panel {
  margin-left: unset;
  margin-right: 300px;
}

.PageNavOverlay.shifted {
  -webkit-transform: none;
  transform: none;
}

After your WebViewer constructor add the following code:

viewerElement.addEventListener('ready', function() {
  var viewerInstance = viewer.getInstance();

  viewerInstance.setHeaderItems(function(header) {
    // move panel button to the right side
    var headerItems = header.getItems();
    var tabsButton = headerItems.splice(0, 2)[0];
    headerItems.push(tabsButton);
    header.update(headerItems);
  });
});

[David Compton]

Hi Matt,

I've tried implementing this solution in the new UI.  It moves the panel to the right OK - but I've noticed that it breaks the fit width/fit page button.  I'd like to implement the right hand side panel.  Can you take a look at this and advise what needs to be changed to fix this issue?

Kind regards,

David

--
You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.
Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

[Matt Parizeau]

Hi David,

Thanks for the report, I was able to reproduce. It looks like this is an issue with the fit mode button remounting in a strange order causing the event handler on the button to be removed. I've submitted a pull request here that fixes the issue for me (https://github.com/PDFTron/webviewer-ui/pull/105). You could try pulling it in and building on your end or wait for it to be merged into the WebViewer UI master and pull from there.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Wednesday, December 26, 2018 at 10:06:39 AM UTC-8, David Compton wrote:

Hi Matt,

I've tried implementing this solution in the new UI.  It moves the panel to the right OK - but I've noticed that it breaks the fit width/fit page button.  I'd like to implement the right hand side panel.  Can you take a look at this and advise what needs to be changed to fix this issue?

Kind regards,

David

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webviewer+unsubscribe@googlegroups.com.
To post to this group, send email to pdfnet-webviewer@googlegroups.com.

[David Compton]

Thanks Matt.  I got the latest from GitHub - seeing as Jason had merged in your pull request.  That fixed the problem with that button for me.

Kind regards,

David

On Fri, 28 Dec 2018 at 06:37, Matt Parizeau via PDFTron WebViewer <pdfnet-webviewer+APn2wQfzwjN3K1P...@googlegroups.com> wrote:

Hi David,

Thanks for the report, I was able to reproduce. It looks like this is an issue with the fit mode button remounting in a strange order causing the event handler on the button to be removed. I've submitted a pull request here that fixes the issue for me (https://github.com/PDFTron/webviewer-ui/pull/105). You could try pulling it in and building on your end or wait for it to be merged into the WebViewer UI master and pull from there.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

On Wednesday, December 26, 2018 at 10:06:39 AM UTC-8, David Compton wrote:

Hi Matt,

I've tried implementing this solution in the new UI.  It moves the panel to the right OK - but I've noticed that it breaks the fit width/fit page button.  I'd like to implement the right hand side panel.  Can you take a look at this and advise what needs to be changed to fix this issue?

Kind regards,

David

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.

Visit this group at https://groups.google.com/group/pdfnet-webviewer.
For more options, visit https://groups.google.com/d/optout.

--

You received this message because you are subscribed to the Google Groups "PDFTron WebViewer" group.

To unsubscribe from this group and stop receiving emails from it, send an email to pdfnet-webview...@googlegroups.com.
To post to this group, send email to pdfnet-w...@googlegroups.com.