Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

rahulgoyal1287
New Contributor III

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

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

4 Replies
s_achraphe
New Contributor III

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

‌hello there !

may be you can take a look at this content

hope it helps : https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

A.

rahulgoyal1287
New Contributor III

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

Thank you Achraphe for the details. It is certainly helpful..

I am going through that. In the meanwhile, if you know the solution of above scenario.. please share it with me as a quick fix.

Best Regards,

Rahul

s_achraphe
New Contributor III

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

Hello Rahul,

You're welcome

May be you can upload an image of what exactly you want to do

Just to be sure that I understood well and help you

balabhaskarqlik
Honored Contributor

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

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;

}

Community Browser