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 file in globaldoc viewer,before i will decrease the browser width and height using browser “Restore Down” button after open file in viewer i will click maximize button,but globaldoc viewer not fit to full screen.

In ur Demo project u will use static width and height using following style
style=‘width: 1000px; height: 580px; overflow: auto; position: relative; margin-bottom: 20px; background-color: gray; top: -1px; left: 0px;’
So when restore down and maximize browser always it fit into static size.but i need to set as dynamic width and height.
1.Screenshot by Lightshot ----1366X768
2.Screenshot by Lightshot -----1900X1600

pls see the difference 1 res is smaller so viewer look full in page,but no2 is bigger res viewer not fit into full browser bcz u gave static height and width,so i need some css to fit into browser if use restore down and maximize window.

What i try,here i add css class to div tag like
.styCenter
{
height:100%;
width :100%;
}

$(document).ready(function () {
$(“.styCenter”).css({ “height”: ‘100%’ });
$(“.styCenter”).css({ “width”: ‘100%’ });

});

The above one not work

Pls 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.