CODEWITHSUNDEEP
javascripthtmlautodesk-forgeautodesk-viewer
M de Vries
M de Vries

Reputation: 25

Autodesk forge viewer initial size is window not the div

I am working with the forge headless viewer using this code when the page is loaded to initalise it

Autodesk.Viewing.Initializer(options, function onInitialized(){
    viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
    //viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D);
    viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Viewer3D);
    viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});

It gets moved into the div in the following html code

<div style="width:80%; float:right; ">
    <div id="MyViewerDiv" style="background-color: #0f0; width:600px; display:inline-block; ">A</div>
</div>
<div style="background-color: #eee; min-height: 60px; width:600px; ">
    <button id="MyPrevButton" class="MyNavButton">Previous</button>
    <button id="MyNextButton" class="MyNavButton">Next</button> 
</div>
<div id="lijst" style="background-color: #ddd; width:20%; float:left;"></div>

Ideally I would like the div with id="lijst" to go to the right of the viewer, but I am running into a problem that I have been unable to find a solution for.

During initialisation the size of the viewer canvas is calculated and it gets set to the size of the entire window, not the size of the div id="MyViewerDiv"

This is understandable since before the viewer canvas is created there is no way for the html parser to calculated the size of the div (which is still empty until after this canvas is created).

The result is that the viewer extends beyond the size of the window. The browser creates a scrollbar and if you scroll all the way to the right the extra menu is exactly scrolled off screen to the left. In effect the div has been set to a size of 100% rather than the 80%.

Vertically the same happens. The div with the two buttons is placed at the top of the window even if it is placed below the div with the viewer canvas (which again makes sense because when the layout engine calculates the position the viewer div is still empty and has a height of 0)

How can I resize the viewer canvas after it is created to the size it should have to make the entire display fit the screen without need for scrollbars (and allow for a more responsive-like UI)?

Upvotes: 1

Views: 2256

Answers (1)

Petr Broz
Petr Broz

Reputation: 9942

There's probably more ways to go around this, but you might want to consider using position: absolute, for example:

CSS:

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

#viewer {
    position: absolute;
    width: 80%;
    height: 100%;
}

#sidebar {
    position: absolute;
    right: 0;
    width: 20%;
    height: 100%;
}

HTML:

<body>
    <div id="viewer"></div>
    <div id="sidebar"></div>
</body>

Upvotes: 1

Related Questions