topic Mashup : Add Qlik Sense Selection bar into a Bootstrap modal in Integration, Extension & APIs

Mashup : Add Qlik Sense Selection bar into a Bootstrap modal

Fri, 26 May 2017 13:59:23 GMT

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:

I added a button to call the modal:

I created the modal:

<h4 class="modal-title">Selection</h4>

</div>

</div>

</div>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

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

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

Regards,

Clément Boyer

Re: Mashup : Add Qlik Sense Selection bar into a Bootstrap modal

ErikWetterberg — Wed, 31 May 2017 11:39:55 GMT

Hi,

This is probably a problem with z-index. Qlik sets z-index to 1 for the current-selections-panel. You need to override it for the selection bar when its inside a modal.

Add something like this to your CSS:

.modal-body .qv-panel-current-selections {

z-index: 1100;

}

The value 1100 is just my guess, I haven't actually tested this.

Hope this helps

Erik Wetterberg

Re: Mashup : Add Qlik Sense Selection bar into a Bootstrap modal

Thu, 01 Jun 2017 12:21:06 GMT

Hi,

Thanks for the reply Erik.

I tried z-index with the Boostrap modal but it doesn't seems to solve the issue.

So I made a custom modal using z-index and it work as intended.

Regards,

Clément Boyer

Re: Mashup : Add Qlik Sense Selection bar into a Bootstrap modal

Fri, 02 Jun 2017 13:39:12 GMT

Hi Erik,

I tried again your CSS code, I slightly modified it:

.qv-listbox-popover{

z-index: 1100;

}

And it works even after I exported my mashup inside a wamp server.

Also I tried the CSS code below, but It doesn't work:

.modal-body.qv-listbox-popover{

z-index: 1100;

}

.qvobject.qv-listbox-popover{

z-index: 1100;

}

I hope this helps.

Regards,

Clément Boyer

Re: Mashup : Add Qlik Sense Selection bar into a Bootstrap modal

ErikWetterberg — Sat, 03 Jun 2017 07:18:06 GMT

Good!

And what about this:

.modal-body .qv-listbox-popover{

z-index: 1100;

}

.qvobject .qv-listbox-popover{

z-index: 1100;

}

Not I have added a space between the css class names. That will change the rule from 'Elements with class modal-body and qv-listbox-popover' to 'Elements with class qv-listbox-popover inside elements with class modal-boy'. CSS is tricky...

Hope this helps

Erik Wetterberg

Re: Mashup : Add Qlik Sense Selection bar into a Bootstrap modal

Tue, 06 Jun 2017 12:18:42 GMT

Hi,

Adding a space between the css class names doesn't work. I'll leave the CSS like this:

.qv-listbox-popover{

z-index: 1100;

}

Thank you,

Clément Boyer