topic Re: Mashup: Problem with selection box in Integration, Extension & APIs

Mashup: Problem with selection box

claudiadrey — Wed, 08 Nov 2017 13:30:50 GMT

Hello everybody,

I have a Problem with my selection box. As you can see (on the screenshot) when I click on my box the possible selctions (the list) doesn't appear above the box. The list instead appears very very far above.

So what's my mistake? Ideas?

Thank you for helping!

Claudia

Re: Mashup: Problem with selection box

_jespers_ — Thu, 09 Nov 2017 13:41:13 GMT

Hello,

Without seeing the code behind this it is very difficult giving a good answer. But if I would take a guess here, is that the selection box has absolute positioning which gives this kind of issue.

Re: Mashup: Problem with selection box

claudiadrey — Thu, 09 Nov 2017 13:51:44 GMT

The Problem is, that when you click on the box the require.js starts running and creates a lui object..

the css ob my box is very simple. It's just a wrapper for the qlik sense object.

html:

</div>

</div>

</div>

css:

.qvobject.filter, .qvplaceholder.filter{

/*flex: 1 1 auto;*/

padding: 30px 10px 10px 10px;

height: 200px;

}

Re: Mashup: Problem with selection box

_jespers_ — Thu, 09 Nov 2017 13:57:52 GMT

Is it possible for you to attach the mashup as a zip-file so I can import it and have a look at what the issue could be?

Re: Mashup: Problem with selection box

claudiadrey — Thu, 09 Nov 2017 14:01:41 GMT

Sadly It's not possible for me, because it's a project for my Company

Re: Mashup: Problem with selection box

_jespers_ — Thu, 09 Nov 2017 14:13:14 GMT

I understand that you can't share any company specific ideas/data but you must be able to strip down the html code to a minimum where you still get the issue and share that html & css code. Otherwise, it will be almost impossible to help you if I cant reconstruct the issue by myself.

Re: Mashup: Problem with selection box

claudiadrey — Thu, 09 Nov 2017 14:17:16 GMT

Re: Mashup: Problem with selection box

_jespers_ — Thu, 09 Nov 2017 14:29:40 GMT

First of all I don't get the container to be that small (as you said, it has been set to 200px in height) so I don't get the selection pop-up:

But if I change the height of the container to 100px, I still don't get the issue:

But one thing you could try is to put you placeholders within a flex-container:

<div class="flex-container">
    <div class="row">
        <div class="col-lg-4 borderShadow">
            <div class="filter qvobject" id="QV01"></div>
        </div>
        <div class="col-lg-4 borderShadow">
            <div class="filter qvobject" id="QV02"></div>
        </div>
        <div class="col-lg-4 borderShadow">
            <div class="filter qvobject" id="QV03"></div>
        </div>
    </div>
</div>

EDIT: Ok, I actually got it now when I tried running it in Internet Explorer

Re: Mashup: Problem with selection box

_jespers_ — Thu, 09 Nov 2017 14:53:02 GMT

Ok, I have done some testing here. And even if you create a new mashup from scratch with as little as possible in it you still get this issue in Internet Explorer as soon as you scroll down on the page a bit an click on the filter. If you are at the top of the page and click on the filter it works fine.

See attached example.

Don't think there is much you can do here besides reporting this as a bug to Qlik.

EDIT: Get the same issue in Chrome and Firefox.

EDIT 2: Ok, I now see what the issue is. It was the absolute positioning that was the issue. The script that adds the positioning coordinates doesn't take in account that the scrollbar has been moved. So if you scroll down 20px, the pop-up will be misplaced by 20px, if you scroll down 200px, the pop-up will be misplaced with 200px.

Re: Mashup: Problem with selection box

claudiadrey — Thu, 09 Nov 2017 15:26:49 GMT

Which absolute positioning do you mean? Of the whole body

Re: Mashup: Problem with selection box

_jespers_ — Thu, 09 Nov 2017 15:30:34 GMT

No, I mean the absolute positioning of the pop-up:

Re: Mashup: Problem with selection box

claudiadrey — Thu, 09 Nov 2017 15:36:58 GMT

Ah ok, hmm I don't know if I can overwrite the css of this object, Do you have an idea?

Re: Mashup: Problem with selection box

_jespers_ — Thu, 09 Nov 2017 15:44:19 GMT

That's the thing, you can't (or it will be a real hassle). And this is because the style for this element is set specifically on this element when you click on the filter. And this styling will overwrite all css classes.

So this is probably something Qlik has to change in their code to be able to make this work.

Re: Mashup: Problem with selection box

claudiadrey — Thu, 09 Nov 2017 16:00:02 GMT

Oh ok. Thank you very much!

Re: Mashup: Problem with selection box

Yianni_Ververis — Fri, 10 Nov 2017 12:35:44 GMT

Try to add in your mashup css

html,

body {

height: 100%;

}

Re: Mashup: Problem with selection box

_jespers_ — Fri, 10 Nov 2017 13:53:00 GMT

Unfortunately, that does not work.

Re: Mashup: Problem with selection box

_jespers_ — Fri, 10 Nov 2017 13:57:51 GMT

I think I found a solution for you. Try adding this code to your css

.lui-popover-container{
        position: fixed !important;
        z-index: 1000 !important;
    }

Re: Mashup: Problem with selection box

claudiadrey — Fri, 10 Nov 2017 14:22:46 GMT

It works!

Thank you soooo much !!!

Re: Mashup: Problem with selection box

pranamk1 — Wed, 24 Feb 2021 06:06:51 GMT

Hi @claudiadrey @_jespers_ @Yianni_Ververis

I have a modal window where if I use "z-index", then the pop-over will appear behind the modal window.

For that modal window search pop-over, it requires:

.lui-popover-container{
position: absolute !important;
top : 798px !important;
}

For other pop-overs in the page this will work:

.lui-popover-container{
position: fixed !important;
z-index: 1000 !important;
}

Kindly let me know how I can fix this problem.

Thanks,

Pranam