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

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

rahulgoyal1287 — Tue, 31 Jul 2018 13:49:51 GMT

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

</div>

</div>

</div>

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

s_achraphe — Tue, 31 Jul 2018 18:41:15 GMT

‌hello there !

may be you can take a look at this content

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

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

rahulgoyal1287 — Wed, 01 Aug 2018 04:51:51 GMT

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

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

s_achraphe — Wed, 01 Aug 2018 05:25:05 GMT

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

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

BalaBhaskar_Qlik — Wed, 01 Aug 2018 06:31:30 GMT

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

Here is my HTML:

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

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

}