Hello,
I am embedding QS in a webpage and the height of the dashboard is not working as expected. I have below code in html for embedding:
<!DOCTYPE html>
<html>
<head>
<title>Basic Embed</title>
<style>
iframe {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>
<!-- You can download the latest QuickSight embedding SDK version from https://www.npmjs.com/package/amazon-quicksight-embedding-sdk -->
<!-- Or you can do "npm install amazon-quicksight-embedding-sdk", if you use npm for javascript dependencies -->
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.10.0/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
console.log('before parse')
let params = new URLSearchParams(document.location.search);
let finalUrl = decodeURIComponent(params.get("embedUrl")); //An embed-url is passed as a search parameter
console.log(finalUrl);
const embedDashboard = async () => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
const embeddingContext = await createEmbeddingContext();
const containerDiv = document.getElementById("embedding-container");
const frameOptions = {
// replace the value below with the one generated via embedding API
url: finalUrl,
container: containerDiv,
resizeHeightOnSizeChangedEvent: false
};
const contentOptions = {
toolbarOptions: {
export: false,
undoRedo: false, // use this option to show or hide the undo and redo buttons
reset: false, // use this option to show or hide the reset button
},
sheetOptions: {
singleSheet: false, // use this option to enable or disable sheet tab controls
emitSizeChangedEventOnSheetChange: false, // use this option in combination with resizeHeightOnSizeChangedEvent property,
// to allow iframe height to resize dynamically, based on sheet height, on changing sheets.
},
attributionOptions: {
overlayContent: false,
}
};
const embeddedDashboard = await embeddingContext.embedDashboard(frameOptions, contentOptions);
counterVal = 1
function setParams() {
console.log("Value to set: " + counterVal)
embeddedDashboard.setParameters([
{
Name: 'RefreshParam',
Values: counterVal,
}
])
counterVal = counterVal + 1
}
setInterval(setParams, 30000);
};
</script>
</head>
<body onload="embedDashboard()">
<div id="embedding-container"></div>
</body>
</html>
The output is not correct:
The dashboard renders but there is scroll and whitespace at the bottom.
This issue is slightly urgent so can you please advise @DylanM & team?
Thank youl