Skip to main content
Announcements
Qlik Connect 2024! Seize endless possibilities! LEARN MORE
cancel
Showing results for 
Search instead for 
Did you mean: 
sebastian_serva
Partner - Contributor III
Partner - Contributor III

Chart tooltip offset position on mashup

Hi,

We all know that Qlik CSS styles were built with the Qlik Sense Client in mind, which has a no scrollable body.

When we reference qlik-styles.css on a mashup which has scroll, the chart tooltip y position is thrown off completely. Seems like it's not taking into account the scrolled distance.

tooltip-issue.png

Does anyone have a workaround or fix handy?

Regards,

Seb.

2 Replies
Francis_Kabinoff
Former Employee
Former Employee

Hi Sebastian,

qlik-styles.css sets the height of the html and body tags to 100%, and then you should set overflow: auto on the body tag. What this does is allows the contents inside the body to scroll, while not actually ever changing window.pageYOffset.

You must be overriding it somewhere in your own css. Just apply the css rules below and it should work.

html, body {

  height: 100%;

}

body {

  overflow: auto;

}

sebastian_serva
Partner - Contributor III
Partner - Contributor III
Author

Hi Francis,

Sorry, I just saw your reply just now Thanks, that's exactly what I applied to the mashup. Now we have a new issue (ha!), and it's the fact that they are using Google recaptcha on the same mashup page to submit a feedback form, and the captcha has an image picker popup which y position is thrown off due to the fact that we're applying those rules to the CSS.

So stuck in the middle, we need body height 100% in order for Sense components to position correctly, but it interferes with other stuff on the page.