Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
May 10, 2022 1:43:00 PM
Jul 30, 2021 10:22:27 AM
Layout can happen to be broken when toggling between sheets embedded with Single URI by hiding/unhiding them with CSS properties such as display:none; and display:block;
Environments:
Qlik Sense Enterprise on Windows
Resolution
This is due to a browser behavior in how Qlik Sense and the browser handles rendering of hidden object.
In order to work around this issue, setting again the src of the iFrame when it's hidden and setting it when visible will trigger a re-rendering and ensure the layout doesn't get broken.
Resizing the page to trigger a redrawing can as well be an alternative solution.
Sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous"></script>
<style>
#tab1,#tab2{
height:500px;
width:800px;
}
.active{
display:block;
}
.inactive{
display:none;
}
</style>
</head>
<body style="height:600px;">
<button id="button1">Toggle</button>
<div id="tab1" class="active">
<iframe id="iframe1" src="https://qlikserver1.domain.local/single/?appid=aa8c4c51-014c-4e2c-9ad7-819786be9391&sheet=38d2ff82-19c5-404d-9822-da280aaa4bff&opt=ctxmenu,currsel" style="border:none;width:100%;height:100%;"></iframe></div>
<div id="tab2" class="inactive">
<iframe id="iframe2" src="https://qlikserver1.domain.local/single/?appid=aa8c4c51-014c-4e2c-9ad7-819786be9391&sheet=09e9f207-46b6-4f45-96b4-79678372b3cd&opt=ctxmenu,currsel" style="border:none;width:100%;height:100%;"></iframe>
</div>
</body>
<script type="text/javascript">
$("#button1").click(function(event, ui) {
$("#tab1").toggleClass("active inactive");
$("#iframe1").prop('src','https://qlikserver1.domain.local/single/?appid=aa8c4c51-014c-4e2c-9ad7-819786be9391&sheet=38d2ff82-19c5-404d-9822-da280aaa4bff&opt=ctxmenu,currsel');
$("#tab2").toggleClass("active inactive");
$("#iframe2").prop('src','https://qlikserver1.domain.local/single/?appid=aa8c4c51-014c-4e2c-9ad7-819786be9391&sheet=09e9f207-46b6-4f45-96b4-79678372b3cd&opt=ctxmenu,currsel');
});
</script>
</html>
