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

      Hi,


      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>

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

      ModalProblem.png

      Do you have a solution to solve my problem, please ?


      Regards,

      Clément Boyer