Annotation toolbar has no responsive design and can loose its functionality

GroupDocs.Annotation Product Family
1

Hi,



the annotation toolbar on the left has a fixed height and is vertically centered if the viewport height is smaller than the toolbar height (e.g. hosted in IFrame or small browser window).

This results in a cutoff toolbar (top and bottom) where you cannot choose the upper and lower annotation tools any more and where you are not able to move the toolbar somewhere else, because you cannot reach the upper side of the toolbar (it’s cut off) - even on resize (no vertical recenter on resize (enlarge)).



This should be changed to a toolbar with responsive design that adapts to its viewport (2nd column or scrollbar).



Many thanks in advance!



Phil

2

Hi Phil,


Thank you for the request. You can fix this and resize the toolbar as you need with such simple BLOCKED SCRIPT
function resize() {
$("#annotation-widget").css(“height”, “400px”);
$(".tools_list").css({
‘-moz-column-count’: ‘3’,
‘-moz-column-gap’: ‘20px’,
‘-webkit-column-count’: ‘3’,
‘-webkit-column-gap’: ‘20px’,
‘column-count’: ‘3’,
‘column-gap’: ‘20px’
})
$(".embed_annotation_tools").css({“height”: “220px”, “width”: “120px”});
}

This function called via button click but you can call it when you need, for example on window resize or something like that. Also please note that the values which I use in the code example is just a example values and you can set what ever you need - calculate them dynamically etc.

Best regards.
3

Thank you Pavel,



works like a charm!



Regards,



Phil

4

Hi Phil,


Glad to hear that.

Best regards.