ViewerJS UI not responsive

[chrilith]

Hi,

In http://viewerjs.org/instructions/ you specify some small frame sizes but the UI isn't responsive and using for instance 420px large iframe, the pages and zoom options overlap.

Also, if the document filename is long, the text will go into two or more line, out the the header bounds.

Thanks!

[chrilith]

Looking at the code, the easier way to fix this seems to move the ViewerJS button to the top as a small square icon with "?" in it (for instance) and move the middle toolbar to the right.

For the document name problem, the viewer.css can be adjusted to (line 95):

#documentName {
    font-size: 14px;
    white-space: nowrap;
    margin-right: 100px; /* To be adjusted if more icons to show */
    overflow: hidden;
    text-overflow: ellipsis;
}

You can also remove the dual #documentName definition (line 87 and 95).

[chrilith]

Just added a pull request for the documentName stuff #164

[gau1991]

Looking at the code, the easier way to fix this seems to move the ViewerJS button to the top as a small square icon with "?" in it (for instance) and move the middle toolbar to the right.

+1

+1

[arianmaykon]

👍