Skip to main content
Announcements
Have questions about Qlik Connect? Join us live on April 10th, at 11 AM ET: SIGN UP NOW
cancel
Showing results for 
Search instead for 
Did you mean: 
claudiadrey
Partner - Contributor III
Partner - 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
_jespers_
Partner - Creator II
Partner - Creator II

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

18 Replies
_jespers_
Partner - Creator II
Partner - Creator II

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
Partner - Contributor III
Partner - Contributor III
Author

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;

}

_jespers_
Partner - Creator II
Partner - Creator II

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
Partner - Contributor III
Partner - Contributor III
Author

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

_jespers_
Partner - Creator II
Partner - Creator II

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
Partner - Contributor III
Partner - Contributor III
Author

Ok

_jespers_
Partner - Creator II
Partner - Creator II

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

_jespers_
Partner - Creator II
Partner - Creator II

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
Partner - Contributor III
Partner - Contributor III
Author

Which absolute positioning do you mean? Of the whole body