Annotation API Layout/scrollbar issue in Java

GroupDocs.Annotation Product Family
1

Hi,


I have a scrollbar issue (screenshot). When annotation widget is configured to be 100% the bottom scrollbar is not visible at all since the header takes 63px and by 63px the viewer is pushed down. When I decrease it to be e.g. 80% I get the issue on the screenshot.
Is there any way to configure the viewer to be 100%-63px in height? In other words, is there a way to add the toolbar into the “annotation-widget” div?


Thanks in advance for any help,
Mariusz
2

The original header is inside that 100% div, so it works fine, but the custom one is outside and those styles hide the original one:


#annotation-widget .viewer_header{display:none;}
#annotation-widget .viewer_mainwrapper{top:0px}

That’s not a good solution as user can use dev toolbar and unhide it and then do som not allowed things.
Can you change the way it is implemented?

Thanks,
Mariusz
3

The original header works fine in all apsects. The custom one unfortunately pushes down the viewer no matter what I do. Additionally couple of things doesn’t work (separate thread).


Please let me know whether there is any way to make it work correctly.

Thanks,
Mariusz
4
Hello Mariusz,

You can try to use top, bottom CSS parameters in place of height to configure the position of the custom toolbar better. If the original toolbar works then there should be a way to properly stylize the custom one.

What about toolbar visibility and accessibility. First there are settings like showHeader, showFolderBrowser, showPrint, showDownload, showZoom, showPaging, showViewerStyleControl, showSearch. You can use them to show/hide the appropriate controls from end-users. This functionality uses CSS to show/hide buttons. You can completely remove those controls from UI using JavaScript after page loaded. Also to add more security, you can disable server-side handling of some requests.

The other option is to style the original toolbar to fit your design. You can apply own CSS styles to the GroupDocs toolbar.

Mariusz:
Can you change the way it is implemented?
Our developers will look at it. We will try to improve the toolbar to be more comfortable in customization.

5

Custom toolbar is positioned correctly. But the viewer is set to be 100% in height which means that the bottom scrollbar is never visible to the user, thus the horizontal scrolling is not possible.

6

Mariusz, can you provide the layout and styles you are using? We will examine and fix them for you. It’s hard to suggest something seeing only screenshots in this case.

7

Sure, sample attached. Thank you.

8

I’m attaching the index.jsp file that I used within the groupdocs-slim-annotation-java-spring-sample sample. It can be reproduced in there. Please let me know if you find any solution to that. Thank you.

9

Thank you, Mariusz, for provided samples. We will examine them and get back to you.

10
Hello Mariusz,

Examined the index.jsp you provided. Why not to use the absolute positioning? Just add these styles:
#annotation-widget .groupdocs_viewer_wrapper.grpdx {
position: absolute;
top: 63px;
bottom: 0;
left: 0;
right: 0;
height: auto;
}

To correct the side panel size you can use JavaScript on window resize and on the start. For example, add this function:
function resizeCommentsPanel() {
var jA = $("#annotation-widget");
var h=jA.find(".doc_viewer").height()-65;
jA.find(".comments_content").css({height:h-152+"px"});
jA.find(".comments_scroll").css({height:h-152+"px"});
jA.find(".comments_scroll .viewport").css({height:h-172+"px"});
jA.find(".comments_sidebar_collapsed").css({height:h-50+"px"});
jA.find(".comments_scroll").tinyscrollbar_update("relative");
jA.find(".comments_scroll_2").css({height:h-152+"px"});
jA.find(".comments_scroll_2 .viewport").css({height:h-152+"px"});
jA.find(".comments_scroll_2").tinyscrollbar_update("relative");
};
and call it somewhere in the $(function() { … }); i.e.
$(window).resize(resizeCommentsPanel);
setTimeout(resizeCommentsPanel, 300);

I’ve attached back the modified index.jsp.

11

The issue is still the same. The whole way to customize the header is really bad as it will always cause issues with the positioning. Check the attached screenshots. The scrollbar goes 63px below the screen.

12
Hello Mariusz,

We are sorry to see you are still facing this problem. Can you describe what issues with positioning do you mean that may appear?

Have you tried to apply CSS styles I provided? It should not cause issues with positioning. The styled div is placed in the relatively positioned parent div those should be positioned as specified without any strange behavior.

13

The issue is visible on the screenshots. The preview part is displayed incorrectly and the scrollbar goes below the screen. With the standard header it behaves correctly. I added all your styles.

14

OK, I tried redoing everything from scratch and now the styles you provided seem to fix the issue. Thanks!

15

You are welcome! Glad to see that now it works fine.

16

Hi,


I still see two issues. On the first screenshot you will notice an offset which make the UI looking strange. How to fix it?

Additionally during the loading there is a nice rectangle displayed (screenshot 1), but when the file is loaded it is expanded to the whole page and with a big resolution it looks really ugly and it is zoomed 10 times. Can it be loaded as displayed during loading?

Thanks,
Mariusz
17
Hello Mariusz,

To fix your first issue, you should add this code in your index.jsp file in a section

.grpdx .viewer_loading_overlay{
margin : 0 0;
}

To fix your second issue you should configure your application.properies file and change property initialZoom for exaple

groupdocs.annotation.initialZoom=80

Please notify us if you will have any other questions.

Best regards
Evgen Efimov

http://groupdocs.com
Your Document Collaboration APIs
Follow us on LinkedIn, Twitter, Facebook and Google+