Control width and height of page

Doconut Product Family
1

Hello Dear,
I am using doconut viewer as viewer to view my pdf, doconut convert every page to image as png and set attribute and view it like below exmaple

The question is:
How To control the width and height before view the page ?
what is the way to set the width and height to percent instead of this pig value?

2

@Nazahait,

To control the width and height of the viewer before displaying the page, you can use CSS to adjust these properties.

In our demo samples, we show how you can edit the width and height to suit your needs. The following is an example of CSS that you can use:

#div_ctlDoc { /* Set your viewer ID */
    width: 100%;  /* Adjust the width to be 100% of the container */
    height: 80vh; /* Set height to 80% of the viewport height */
}

In addition to CSS, you can also control the width and height through JavaScript. In our demo samples zip file, you’ll find an example of the Resize function, which adjusts the size of the viewer dynamically. Here is a simple example of how it can be done and you can update adapting to your requirements:

function Resize() {

    if (resizing) { return; }

    resizing = true;

    var yPadding = 20;

    docViewerDiv.css("height", "90vh");
    docViewerDiv.height(docViewerDiv.height() - yPadding);

    Refit();

    resizing = false;
}

function Refit() {
    if (null !== objctlDoc) {
        objctlDoc.Refit();

        // optional call
        setTimeout(function () { objctlDoc.FitType('width'); }, 1000); // wait 1 second
    }
}

Feel free to experiment with the values to match your specific layout requirements, or refer to the demo zip file for additional examples.