Hide the More Options Button from Outlines

WebViewer Version:
11.3.0

Do you have an issue with a specific file(s)?
No

Can you reproduce using one of our samples or online demos?
Yes

Are you using the WebViewer server?
No

Does the issue only happen on certain browsers?
No

Is your issue related to a front-end framework?
Yes

Is your issue related to annotations?
No

Please give a brief summary of your issue:
I would like to disable the Pop-up menu that can shown up next to a section from the Outlines view (see the attached image).
I know I can hide controls based on their data-element id but in this case the data element id is indexed according to the position of the section in the outlines, so for the first one it is outline-more-button-0, the second is outline-more-button-1 etc.
And I don’t know beforehand the number of sections the rendered PDF will have.
Is there a way I could hide the button which displays the More Options pop-up menu?

Regards,
Gabor

1 Like

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


To hide the “More” button from the outlines in WebViewer, you can use CSS to target the class or attribute of the button instead of relying on the data-element id, which changes based on the position. This approach allows you to hide all instances of the button regardless of the number of sections in the outlines.

Some things you can try:

  • Use CSS to target the common class or attribute of the “More” buttons in the outlines panel.

  • Add a custom style to your application that sets the display property of these buttons to none.

  • Inspect the element in the browser’s developer tools to find a consistent class or attribute that applies to all “More” buttons.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

1 Like

Hello Gabor,

You can change the CSS properties easily in WebViewer.
Here is a guide on that: Custom JavaScript PDF Viewer UI Style: Buttons, Panel, Modal | Apryse documentation

Adding the CSS below should hide the more options button from all the outlines.

.panel-list-more-options {
    display: none !important;
}

Best Regards,
Darian

1 Like

Hi Darian,

Thanks for the answer, this solved the problem.

Regards,
Gabor

2 Likes