Resize of the viewer

arosano · September 4, 2014, 4:26pm

I have some scenarios when I open a document in a pop-up:

In img1, doesn’t appears an horizontal scrollbar, so the document is cut off on one side.
In img2, the pop up of step 1 is maximized. The document doesnt fit the width and height of the window.
In img3, with a refresh (“F5”) of the window, again doesn’t appears horizontal scrollbar.

I suppose that the problem is the logic of the resize (it is in the VisorGroupDocs.aspx).

Thanks.

denisgvardionov · September 9, 2014, 2:51pm

Hello Alexis,
You need to resize the GroupDocs.Viewer’s viewport and then the size of the viewport automatically when resizing the window. We have a special example that can do that: http://eu-apps.groupdocs.com:82/
You can open this page and make the browser window smaller and smaller, - during this process you will see viewport that shifts to the center of the page, and then begins to downsize.

All of this is done using JavaScripts and GroupDocs.Viewer’s JavaScripts widget methods. You can see this code by clicking “Show page source code”, but I will post that code here too:

If you will have more questions please feel free to contact us.

arosano · September 9, 2014, 7:34pm

Hi,

Thanks for your answer Denis.

With that javascript code, the viewer displays correctly the width, but height is wrong. See attach.

Regards.

arosano · February 6, 2015, 1:57pm

About the Javascript code block that you have provided, appears those lines:

var new_zoom = new_width * 100 / 850;

$("#visordiv").groupdocsViewer("setWidth", new_width - 10)

What about those values? Why zoom = new_width * 100 / 850? What represents that numbers?

Thank you.

denisgvardionov · September 10, 2014, 3:06pm

Hello Alexis,

We are sorry to hear that you have this issue. The screenshot that you have posted here is pretty strange, it seems that something is wrong with the styles on a page.

I can suggest the approach that we are using, with it there are no such issues. Using this approach you will not have a vertical scroll bar on a page (GroupDocs.Viewer’s viewport has its own scrollbar), and viewport will always fill all available width of the page. In order to achieve that please do the following:

1. Add body { overflow: hidden; } to the HEAD section of the HTML page (this can be master page in case of WebForms or _Layout.cshtml if using MVC).
2. Div where GroupDocs.Viewer’s server control will be placed should be
(of course, you may choose any other “height” value).
3. You should not specify width and/or height in the GroupDocs.Viewer’s server control, in that case viewport will be automatically fitted to the DIV. You can use, for example @(Html.ViewerClientCode().TargetElementSelector("#test").FilePath(“Document.pdf”).UseHtmlBasedEngine(true).SupportPageRotation(true))
As you can see, there are no “Height”, “Width” or “MinimumImageWidth” methods.
4. Make sure that there are no client-side CSS-related conflicts between GroupDocs.Viewer and any other styles.

If this will not help, please post a source code of the code-front of the page along with master page if it is present.

denisgvardionov · February 6, 2015, 3:18pm

Hello Alexis and Phil,

Sorry for the delay (again). I must admit that this issue is one of the most difficult to reproduce. All these days I tried to reproduce it and finally was able to do this.

1. It occurs in one and only in one scenario. You should open a document within GroupDocs.Viewer, when the browser window is not full-sized. Then, when document is opened, you maximize the window, and here is what I got.
2. It really occurs only in the HTML-based rendering mode.
3. The JavaScript, which I gave you some time ago (it performs a dynamic adjustment of the width of the viewport) is not a reason - it does not matter, is it present on the page or not - the issue will be present anyway.
4. Page reloading in the browser solves this distortion, removing empty space.

Phil - thanks for your participation and giving me a key tip — to start the GroupDocs.Viewer from minimized window and then maximize it.

Alexis, now we can see that the JavaScript is not a reason, but here is an answer. This formula is in fact a direct proportionality: 100% and 850 pixels (default width). 10 pixels - this is approximate width of the right scroll bar area; I’ve added them to avoid hiding of the right scroll bar.

Now, when this issue was successfully reproduced, our developers will start to fix it.

We will notify you when a new version of GroupDocs.Viewer will be ready.

Once again, sorry for such long delay.

arosano · September 10, 2014, 3:45pm

Unfortunately your suggestions have no resolve the problem. Below the source code.

<%@ Page Language=“vb” AutoEventWireup=“false” CodeBehind=“VisorGroupDocs.aspx.vb”

Inherits=“WebVisores.VisorGroupDocs” %>

<%@ Import Namespace=“Groupdocs.Web.UI” %>

WebForm2

<%= Viewer.CreateScriptLoadBlock().LoadJquery().LoadJqueryUi().UseHttpHandlers()%>

<%= Viewer.CreateScriptLoadBlock().UseHttpHandlers()%>

body

{

overflow: hidden;

}

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

Stream(New System.Net.WebClient().OpenRead(WebVisores.VisorGroupDocs.AbrirArchivo()),

WebVisores.VisorGroupDocs.ObtenerDocumentoConVersion(),

WebVisores.VisorGroupDocs.ObtenerExtension(),

WebVisores.VisorGroupDocs.ObtenerNombreDocumento()).

EnableRightClickMenu(False).

OpenThumbnails(False).

ShowFolderBrowser(False).

ShowPrint(WebVisores.VisorGroupDocs.ObtenerRolImpresion()).

ViewerStyle(ViewerMode.ScrollView).

ShowViewerStyleControl(True).

Locale(WebVisores.VisorGroupDocs.ObtenerIdioma()).

ShowDownload(WebVisores.VisorGroupDocs.OpcionGuardar()).

UseHtmlBasedEngine(True).SupportPageRotation(True).SupportTextSelection(False).

PreloadPagesCount(5).ZoomToFitWidth(True).

Watermark(WebVisores.VisorGroupDocs.ObtenerTextoMarcaDeAgua(), Color.FromArgb(WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(0),

WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(1), WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(2),

WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(3)), WebVisores.VisorGroupDocs.ObtenerPosicionMarcaDeAgua(), Single.Parse(“100”),

WebVisores.VisorGroupDocs.ObtenerImpresionMarcaDeAgua())%>

Thank you.

arosano · February 10, 2015, 3:52pm

Hello Denis, thanks for your anwers.

About that zoom (850) we have detected that in some cases with some documents when you open the document, the zoom is not correct (so big, see attach).

Exists any way to determine the width of the document and then calculate the zoom?

Thank you.

Screencast attach: Dropbox - Error - Simplify your life

denisgvardionov · September 12, 2014, 9:28am

Hello Alexis,

Thank you for providing the source code of the page. With it we were able to reproduce the issue. In order to fix it you need to set “height: 100%;” for all parent elements of DIV “visordiv”. In particular, for BODY () and FORM ().

If you will have more questions please feel free to contact us.

denisgvardionov · February 11, 2015, 12:04pm

Hello Alexis,

Thanks for recording a screencast for us. The scenario that we’ve seen on the screencast is quite strange; it seems that the script, which we gave, is not working at all, because the document width is too big.

Does this effect disappear when the script is not used? Is it the same when using HTML- and image-based modes? In this particular case we suggest you to increase the value to 950 pixels, for example. The bigger the value, the narrower the viewport size.

About ability to calculate a required and exact value for every specific case - I’m afraid I cannot give you correct answer right now. This script, which performs a dynamic adjustment of the width, it is more experimental, unstable, heuristic, and therefore is not included in the GroupDocs.Viewer, and was provided exclusively to you. We will continue to work on it.

Thanks.

arosano · October 27, 2014, 4:04pm

Hello, I have changed the viewer to the HTML engine, but now the javascript code for the resize doesnt work.

My code:

WebForm2

<%= Viewer.CreateScriptLoadBlock().LoadJquery().LoadJqueryUi().UseHttpHandlers()%>

body

{

overflow: hidden;

}

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

Stream(New System.Net.WebClient().OpenRead(WebVisores.VisorGroupDocs.AbrirArchivo()),

WebVisores.VisorGroupDocs.ObtenerDocumentoConVersion(),

WebVisores.VisorGroupDocs.ObtenerExtension(),

WebVisores.VisorGroupDocs.ObtenerNombreDocumento()).

EnableRightClickMenu(False).

OpenThumbnails(False).

ShowFolderBrowser(False).

ShowPrint(WebVisores.VisorGroupDocs.ObtenerRolImpresion()).

ViewerStyle(ViewerMode.ScrollView).

ShowViewerStyleControl(True).

Locale(WebVisores.VisorGroupDocs.ObtenerIdioma()).

ShowDownload(WebVisores.VisorGroupDocs.OpcionGuardar()).

SupportPageRotation(True).SupportTextSelection(True).

PreloadPagesCount(5).ZoomToFitWidth(True).UseHtmlBasedEngine(true).

Watermark(WebVisores.VisorGroupDocs.ObtenerTextoMarcaDeAgua(), Color.FromArgb(WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(0),

WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(1), WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(2),

WebVisores.VisorGroupDocs.ObtenerColorMarcaDeAgua()(3)), WebVisores.VisorGroupDocs.ObtenerPosicionMarcaDeAgua(), WebVisores.VisorGroupDocs.TamanoMarcaDeAgua(),

WebVisores.VisorGroupDocs.ObtenerImpresionMarcaDeAgua()) %>

arosano · February 11, 2015, 12:44pm

Hello Denis,

About your questions:

With the value in 850: In image-based mode the zoom is almost good (still appears a horizontal scrollbar, smaller than in HTML-based mode).
Increasing the value to 950 pixels: In image-based mode works ok. Not working ok in HTML-based mode.

Document example sent via email.

Thank you.

denisgvardionov · October 28, 2014, 3:25pm

Hello Alexis,

I’m very sorry that you have this issue because this is my fault, when I wrote this code in the past. I’ve made 2 careless mistakes in that code and now I’ll describe them.

1. Please take a look at your code with maximum attention. Viewer widget is placed in the DIV with the name “visordiv”. This name is present everywhere except the one place - " var containerElement = $(“#test”);" in the “$(document).ready” function. That’s because of my inattention. You should fix that - from $(“#test”); to the $(“#visordiv”);.

2. Second error is more significant but much more hidden. All these GroupDocs.Viewer JavaScript widget events and methods which are used in yours code, all of this requires already initialized GroupDocs.Viewer widget. But take note, where the JavaScript code is located (HEAD block), and where the GroupDocs.Viewer widget is located (BODY block). The JS code tries to use GroupDocs.Viewer widget events and methods before the GroupDocs.Viewer is instantiated, and that’s why it is not working. So, in order to fix this you need to move overall JavaScript block ( ) from the HEAD block and put it behind the “Viewer.ClientCode()”.

If you will perform these 2 steps, all will be working perfectly.

denisgvardionov · February 11, 2015, 3:49pm

Hello Alexis,

Thank you for the file “730E SM A30260-A30298 ING CEAM013101.pdf”. We investigated the problem in more detail and found out that the JavaScript code, which performs a dynamic adjustment, is not a reason of the issue at all. You can completely remove this script, but in the HTML-based mode this concrete PDF file will be displayed incorrect, it will be stretched outside the viewport.

It definitely is a bug and our developers started to work on it.

arosano · October 28, 2014, 4:49pm

Hello,

Thanks for yours appreciations.

Anyway, with that changes the resize doesn´t work. I’ve noticed that this happens when is set the HTML based engine (UseHtmlBasedEngine(true))

denisgvardionov · October 29, 2014, 9:32am

Hello Alexis,

In that case I don’t know what you mean under “resize”. I’ve recorded a screencast, it contains the same code that you have posted with my last fixes from the previous post. All that JavaScript code does - is illustrated in the screencast. Maybe you need some other sort of resizing - in that case please describe it in details.

Thanks and waiting for your reply.

arosano · October 29, 2014, 12:43pm

Hi Denis,

Thanks for your sample and your explanations, I can see that in your environment works good.

Look at my sample in: https://dl.dropboxusercontent.com/u/69142139/videosample.avi

Thanks and waiting for your reply.

denisgvardionov · November 4, 2014, 1:13pm

Hello Alexis,

We’ve reviewed your screencast, thanks. However we didn’t see something wrong on it. It seems that there is a misunderstanding. GroupDocs.Viewer doesn’t stretch the document to the full size of the window. The maximum width depends on the actual width of the original document. The main destination of the JavaScript code is to lean the document to the left size and then to decrease the document size dynamically, when the width of the browser window is decreasing.

What I’ve seen on your screencast is a standard behaviour.

arosano · November 4, 2014, 4:04pm

Thanks your answer. The problem is the height (see attach) and not the width of the viewer. I think is weird that when is set in HTML-based engine it doesn’t work: https://dl.dropboxusercontent.com/u/69142139/videosample.avi .But you can see in that screencast: https://dl.dropboxusercontent.com/u/69142139/video2.avi (image based engine) that resize works good.

denisgvardionov · November 7, 2014, 3:03pm

Hello Alexis,

Thank you very much for the explanation and for the recorded screencast. Only now I understood the real problem, that is about height, but not the width. The JS script, that was provided for you, has no relation to the height, it maintains only the width of the browser window.

Now we are investigating this issue, we will notify you in this thread when there will be an update regarding it.