4 Replies Latest reply: Aug 1, 2018 2:31 AM by Bala Bhaskar RSS

    Qlik Sense Mashup: How to adjust the filter page view(from expanded to collapsed)

    Rahul Goyal

      Hi Community Members,

       

      I have just started working on Mashups (multipage) & stuck in some basic functionality.

       

      As a step, i developed 6 containers in a row which has length of 2 points each... & i dropped the filter panes into them..

      it works however it shows them in expanded view and i want to collapse them..

       

      i have used the following scripts to develop them -

       

      HTML


      <section class="content-section-Filter">

      <div class="container">

      <div class="row">

      <div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER1">

      <span aria-hidden="true">×</span>

      </div>

      <div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER2">

      </div>

      <div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER3">

      </div>

      <div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER4">

      </div>

      <div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER5">

      </div>

      <div class="col-sm-2 qvplaceholder_F qvobject" id="FILTER6">

      </div>

      </div>

      </div>

      </section>

       

      CSS

       

      div.qvobject, div.qvplaceholder_F {

      padding: 30px 10px 10px 10px;

      height: 50px;

      }

       

      Please suggest the way forward & if there is any content available on Internet through which i can learn.. please share it with me. That will be a great help

       

      Best Regards,

      Rahul

        • Re: Qlik Sense Mashup: How to adjust the filter page view(from expanded to collapsed)
          Bala Bhaskar

          Use below script, tweak your script pertains object, this is for Filter pane.

           

          Here is my HTML:

          <div class="panel panel-default">

                 <div class="panel-heading">

                      <button class="panel-fullscreen"><span class="glyphicon glyphicon-resize-full color=#404040"></span><span                class="glyphicon glyphicon-resize-small color=#404040"></span></button>

                      <button class="panel-collapse"></button>

                      <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i>Trend</h3>

                 </div>

                      <div id="QV1-9" class="qvobject"></div>

            </div>

           

          Here is part of my JS:

          $('.panel-collapse').on('click', function() {

            $(this).closest('.panel').find('.panel-body').toggle();

            $(this).toggleClass('is-collapsed');

            });

           

            $('.panel-fullscreen').on('click', function() {

            var panel = $(this).closest('.panel');

            panel.toggleClass('is-fullscreen');

            $(this).toggleClass('is-fullscreen');

            qlik.resize(panel.find('.qvobject').attr('id'));

            });

           

           

          Here is my CSS:

          .panel-collapse {

            border: 1px solid #999;

              width: 20px;

              height: 20px;

              float: right;

            font-size: 20px;

              line-height: 18px;

          }

           

           

          .panel-collapse::before {

            content: '-';

          }

           

           

          .panel-collapse.is-collapsed::before {

            content: '+';

          }

           

           

          .panel-fullscreen {

            border: 1px solid #999;

              width: 20px;

              height: 20px;

              float: right;

            font-size: 20px;

              line-height: 18px;

            margin-left: 10px;

            font-size: 14px;

              line-height: 20px;

          }

           

           

          .panel-fullscreen:not(.is-fullscreen) .glyphicon-resize-small {

            display: none;

          }

           

           

          .panel-fullscreen.is-fullscreen  .glyphicon-resize-full {

            display: none;

          }

           

           

          .panel.is-fullscreen {

            position: fixed;

              top: 106px;

              background: #fff;

              z-index: 3;

              right: 0;

              left: 165px;

              bottom: 0;

          }