How to resize viewer based on browser width and height?

GroupDocs.Viewer Product Family
1

Hi

How to resize GlobalDoc viewer based on the browser maximize/restore down?

When I start to view a file in GlobalDoc viewer, I first decrease the browser width and height using the browser “Restore Down” button. After the file opens in the viewer I click the maximize button, but the GlobalDoc viewer does not fill the full screen.

In the demo project a static width and height are used:

style='width: 1000px; height: 580px; overflow: auto; position: relative; margin-bottom: 20px; background-color: gray; top: -1px; left: 0px;'

So when the browser is restored down or maximized the viewer always fits that static size. I need to make the width and height dynamic.

Screenshots

  1. http://prntscr.com/3yjdfv — 1366 × 768
  2. http://prntscr.com/3yjcux — 1900 × 1600

In the first resolution the viewer looks full‑page; in the second it does not fit because of the fixed size. I need CSS that makes the viewer adjust to the browser window when it is restored down or maximized.

What I tried

CSS

.styCenter {
    height: 100%;
    width: 100%;
}

JavaScript (jQuery)

$(document).ready(function () {
    $(".styCenter").css({ "height": "100%" });
    $(".styCenter").css({ "width": "100%" });
});

HTML

<div id="test" class="styCenter" style="position:absolute; left:1px; top:1px; width:100%; height:100%"></div>

The above does not work.

Please reply ASAP.

Regards,
Aravind

2

Hello,

We are sorry to hear that you have such issue. We checked your code that you provided and found out some errors. To resolve the issue and reach your functionality please update your code as shown below:

<style type="text/css" >

.styCenter

{

height:100%;

width :100%;

position:absolute;

left:1px;

top:1px;

}

</style>

<%= Viewer.ClientCode().TargetElementSelector("#test")

%>

<div id="test" class="styCenter"></div>

<script type="text/javascript">

$(function (){

var maxHeight = $(window).width();

var maxWidth = $(window).height();

$(".groupdocs_viewer_wrapper grpdx grpdxdocViewer1").css("width", maxWidth);

$(".groupdocs_viewer_wrapper grpdx grpdxdocViewer1").css("height", maxHeight);

})

</script>

Please feel free to contact us if you will have more questions.


3

Hi,


I need to resize the plugin dynamically, when the window size changes. How can I do this ?

Thanks,

Octavian Epure
4

Hi Octavian,


Thank you for the question. To resize it dynamically you just need to wrap resize functional with code code:

$(window).resize(function () { /* do something */ });

Best regards.
5

Hi Pavel,


It worked, thank you so much !

Sincerely,
Octavian Epure
6

Hi Octavian,


Glad to hear that.

Also I want to notify you that we released a next generation Viewer library and if possible you should migrate on it. For how to migrate and use UI from the old version you can check our examples here.

Best regards.