I am trying to add a fixed properties tab to the right side of my screen. Sadly I am unable to force the Viewer to the left 80% of my screen. Therefore my properties panel is hiding the right 20% of my viewer.
I tried to force the two elements in place with styling, but with no success. The viewer always uses up 100% of the Screen and is therefore partially hidden.
My Code:
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
overflow: hidden;
}
#container {
display: flex;
width: 100%;
height: 100%;
}
#forgeViewer {
flex: 1;
width: 80%;
height: 100%;
background: #f0f0f0;
flex-shrink: 0;
z-index: 1;
}
#propertyPanel {
width: 20%;
height: 100%;
overflow-y: auto;
border-left: 1px solid #ccc;
padding: 10px;
box-sizing: border-box;
background: #fff;
z-index: 2;
position: relative;
}
</style>
</head>
<body>
<div id="container">
<div id="forgeViewer"></div>
<div id="propertyPanel">
<h2>Properties</h2>
<div id="propertyContent"></div>
</div>
</div>
<script>
var viewer;
var options = {
env: 'AutodeskProduction2',
api: 'streamingV2', // for models uploaded to EMEA change this option to 'streamingV2_EU'
getAccessToken: function(onTokenReady) {
var token = '<My Access Token>';
var timeInSeconds = 3600; // Use value provided by APS Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
var documentId = 'urn:<My URN>';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
function onDocumentLoadSuccess(viewerDocument) {
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
}
function onDocumentLoadFailure() {
console.error('Failed fetching Forge manifest');
}
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT, function(event) {
const dbIds = event.dbIdArray;
if (dbIds.length > 0) {
viewer.getProperties(dbIds[0], function(props) {
displayProperties(props);
});
} else {
clearProperties();
}
});
function displayProperties(props) {
const propertyContent = document.getElementById('propertyContent');
propertyContent.innerHTML = '';
for (const prop of props.properties) {
const propDiv = document.createElement('div');
propDiv.innerHTML = `<strong>${prop.displayName}</strong>: ${prop.displayValue}`;
propertyContent.appendChild(propDiv);
}
}
function clearProperties() {
const propertyContent = document.getElementById('propertyContent');
propertyContent.innerHTML = '<p>No properties available</p>';
}
});
</script>
</body>
The Result: how it looks As you can see the view Cube in the top right corner is fully hidden behind the properties tab. I only managed to get the desired results by manually changing the css in the website dev-tools: how i want it to look
When you don't add position: relative; to the parent element (e.g., forgeviewer), the child elements won't correctly calculate their width based on the parent. Adding position: relative; creates a positioning context, ensuring that the child elements use the parent element as a reference for their size and position.
Here is the correct code and the result:
#forgeViewer {
flex: 1;
width: 80% ;
height: 100%;
background: #f0f0f0;
flex-shrink: 0;
z-index: 1;
position:relative;
}
