Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Qlik® Product Spotlight: Discover what’s possible. Get more from our products.
See for yourself. Register today.
claudiadrey
New Contributor III

Mashup: Problem with selection box

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

1 Solution

Accepted Solutions
jesper_snihs
Contributor

Re: Mashup: Problem with selection box

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;

    }

17 Replies
jesper_snihs
Contributor

Re: Mashup: Problem with selection box

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.

claudiadrey
New Contributor III

Re: Mashup: Problem with selection box

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

css:

.qvobject.filter, .qvplaceholder.filter{

/*flex: 1 1 auto;*/

padding: 30px 10px 10px 10px;

height: 200px;

}

jesper_snihs
Contributor

Re: Mashup: Problem with selection box

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?

claudiadrey
New Contributor III

Re: Mashup: Problem with selection box

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

jesper_snihs
Contributor

Re: Mashup: Problem with selection box

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.

claudiadrey
New Contributor III

Re: Mashup: Problem with selection box

Ok

jesper_snihs
Contributor

Re: Mashup: Problem with selection box

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:

pic2.PNG

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

pic1.PNG

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

jesper_snihs
Contributor

Re: Mashup: Problem with selection box

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.

claudiadrey
New Contributor III

Re: Mashup: Problem with selection box

Which absolute positioning do you mean? Of the whole body

Community Browser