Add "Full Screen" button to main toolbar

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.10

Detailed description of issue
I cannot figure out how to add the full screen button to the main menu. Our users cannot find it behind the “gear” icon and it’s a core thing they need to access.

Code I tried below.

Expected behaviour
Full screen button to show on toolbar.

Does your issue happen with every document, or just one?
All

Link to document
Any

Code snippet

instance.UI.setHeaderItems(header => {
	const items = header.getItems();
	items.splice(1, 0,
		{
			type: 'fullScreenButton',
			toolName: 'fullScreenButton'
		}
	);
	header.update(items);
});
3

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

4

Hey there!

Moving buttons to the header is a bit tricky right now, sorry about that. We’re working on improving these APIs.

The trick is to just create a new button like so

 // disable the original one
  instance.UI.disableElements(['fullscreenButton'])

  instance.UI.setHeaderItems((header) => {
    header.getHeader('default').push({
      img: "icon-header-full-screen",
      index: -1,
      type: "actionButton",
      element: 'fullScreenButton',
      onClick: () => {
        instance.UI.toggleFullScreen()
      }
    });
  });

Thanks!
Logan

5

Do you have an example where I can change the icon when the window has fullscreen

6

Thank you so much, Logan. That worked perfectly. Our users will be so happy!

7

Hey Julio,

You can use a StatefulButton as documented on this page.

Logan