2 Replies Latest reply: Feb 17, 2017 6:39 AM by Sebastian Servat RSS

    Chart tooltip offset position on mashup

    Sebastian Servat

      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.

        • Re: Chart tooltip offset position on mashup
          Francis Kabinoff

          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;

          }

            • Re: Chart tooltip offset position on mashup
              Sebastian Servat

              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.