Solved: Re: Mashup: Problem with selection box - Qlik Community

claudiadrey · ‎2017-11-08

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

_jespers_ · ‎2017-11-10

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

View solution in original post

_jespers_ · ‎2017-11-09

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 · ‎2017-11-09

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;

}

_jespers_ · ‎2017-11-09

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 · ‎2017-11-09

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

_jespers_ · ‎2017-11-09

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 · ‎2017-11-09

Ok

_jespers_ · ‎2017-11-09

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

_jespers_ · ‎2017-11-09

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 · ‎2017-11-09

Which absolute positioning do you mean? Of the whole body