Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hi,
I'm currently working on a Mashup and I want to add a selection bar into a Boostrap modal.
In my HTML file :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="showModal" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Show Map</button>
<!-- Map Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Map Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Selection</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div id="QV01" class="qvobject" style="width:100%; height:50px"></div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div id="QV02" class="qvobject" style="width:100%; height:50px"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In my javaScript file:
I wrote a code to resize the Qlik Sense Object inside the modal:
// Function to toggle hidden objects in a bootstrap popup modal
$.fn.extend({
toggleResize: function() {
return this.toggle(400, function() {
qlik.resize();
});
}
});
// IDs for showing up on toggleResize function
$(document).ready(function(){
$('#showModal').on('click', function(event) {
$('#QV01').hide().toggleResize();
$('#QV02').hide().toggleResize();
});
});
But somehow the selection on my selection bar appear behind the modal and I can't select anything.
Do you have a solution to solve my problem, please ?
Regards,
Clément Boyer
Hi Erik,
I tried again your CSS code, I slightly modified it:
.qv-listbox-popover{
z-index: 1100;
}
And it works even after I exported my mashup inside a wamp server.
Also I tried the CSS code below, but It doesn't work:
.modal-body.qv-listbox-popover{
z-index: 1100;
}
.qvobject.qv-listbox-popover{
z-index: 1100;
}
I hope this helps.
Regards,
Clément Boyer
Hi,
This is probably a problem with z-index. Qlik sets z-index to 1 for the current-selections-panel. You need to override it for the selection bar when its inside a modal.
Add something like this to your CSS:
.modal-body .qv-panel-current-selections {
z-index: 1100;
}
The value 1100 is just my guess, I haven't actually tested this.
Hope this helps
Erik Wetterberg
Hi,
Thanks for the reply Erik.
I tried z-index with the Boostrap modal but it doesn't seems to solve the issue.
So I made a custom modal using z-index and it work as intended.
Regards,
Clément Boyer
Hi Erik,
I tried again your CSS code, I slightly modified it:
.qv-listbox-popover{
z-index: 1100;
}
And it works even after I exported my mashup inside a wamp server.
Also I tried the CSS code below, but It doesn't work:
.modal-body.qv-listbox-popover{
z-index: 1100;
}
.qvobject.qv-listbox-popover{
z-index: 1100;
}
I hope this helps.
Regards,
Clément Boyer
Good!
And what about this:
.modal-body .qv-listbox-popover{
z-index: 1100;
}
.qvobject .qv-listbox-popover{
z-index: 1100;
}
Not I have added a space between the css class names. That will change the rule from 'Elements with class modal-body and qv-listbox-popover' to 'Elements with class qv-listbox-popover inside elements with class modal-boy'. CSS is tricky...
Hope this helps
Erik Wetterberg
Hi,
Adding a space between the css class names doesn't work. I'll leave the CSS like this:
.qv-listbox-popover{
z-index: 1100;
}
Thank you,
Clément Boyer