Search code examples
csstwitter-bootstraplistboxqliksensemashup

Qlik Sense Mashup Issue - List Box Toolbar is not showing when making selections

Goal: I am trying to show a List Box's toolbar when selecting one of its values in a Qlik Sense Mashup.

Problem: Toolbar is not showing up.

This is the code:

</html>
...
<body>
...
<div class="row">
    <div class="col-xs-12 col-lg-12">
        <div style="position:relative">
           <div id="QV20" style="width:100%;height:350px;top:0px;left:0px;z-index:1300;"></div>
        </div>
    </div>
</div>
...
</body>
</html>

This is my current result:

Click here to show picture - Toolbar is not showing

This is what I am willing to achieve:

Click here to show picture - desired result

I tried the following already:

1) changing the top into multiple values --> no toolbar

2) Tried to change the z-index --> still no toolbar

3) Tried to change the height --> still no toolbar

4) even tried to use this:

 style="width: calc(100% - 4px); height: calc(8.33333% - 4px); left: calc(0% + 2px); top: calc(0% + 2px);"

this comes straight from Qlik Sense itself --> and still no toolbar

PS: as you can see, I am also using Bootstrap to create my Mashup.

Solution

  • Add this and the toolbar will show up:

    .qv-filterpane
{
    overflow: visible;
}

.qv-selection-toolbar
{  
    position: absolute !important;  
}