5 Replies Latest reply: Jun 6, 2017 8:18 AM by Clément Boyer RSS

    Mashup : Add Qlik Sense Selection bar into a Bootstrap modal

    Clément Boyer


      I'm currently working on a Mashup and I want to add a selection bar into a Boostrap modal.


      In my HTML file :


      • I included the Bootstrap librairy and jQuery library:


      <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>


      • I added a button to call the modal:


      <button id="showModal" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Show Map</button>


      • I created the modal:


      <!-- 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 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 class="col-xs-6 col-sm-6 col-md-6">

                               <div id="QV02" class="qvobject" style="width:100%; height:50px"></div>




      <div class="modal-footer">

               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>






      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


        toggleResize: function() {

      return this.toggle(400, function() {






      // IDs for showing up on toggleResize function


      $('#showModal').on('click', function(event) {






      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 ?


      Clément Boyer