Skip to main content
Announcements
See what Drew Clarke has to say about the Qlik Talend Cloud launch! READ THE BLOG
cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

Fixing infinite scrolling

We created a document extension that adds a banner to our QV document which works fine. It uses jQuery to add an html element to before the toolbar. However, this causes the qv document to have infinite scrolling.

Is there a way to fix this?

3 Replies
Alexander_Thor
Employee
Employee

QV will calculate it's viewport based on the toolbar, tabrow and body. When you introduce another element to the page a certain part will always be off screen and those causing infinite scrolling.

An easy fix to the issue is to not append your banner to the body but instead as the first element of the toolbar.

$('#QvAjaxToolbar').prepend('<div>This wont cause scroll issues</div>')

And if you are interested in the details, this is Qva.ResizeBody which fires everytime you scroll,

Qva.ResizeBody = function() {

  var h = $(document),

  g = Math.min(document.documentElement.clientHeight + $(window).scrollTop(), h.height()),

  b = Math.min(document.documentElement.clientWidth + $(window).scrollLeft(), h.width()),

  f = $(document.getElementById("MainContainer")),

  c = $(Qva.GetToolbarElement()),

  a = $(document.getElementById("Tabrow")),

  d = document.body.scrollWidth;

  if (c[0] && a[0]) {

  f.css("height", Math.max(0, Number(g - c.outerHeight(true) - a.outerHeight(true) - 1)));

  if (IS_TOUCHENABLED) {

  c.css("width", d);

  a.css("width", d)

  } else {

  c.css("width", b);

  a.css("width", b)

  }

  }

  if (IS_TOUCHENABLED) {

  $(document.documentElement).width(d).height(document.body.scrollHeight)

  } else {

  $("body").css("width", b).css("height", g)

  } if (Qva.GetBinder() && Qva.GetBinder().BackgroundMgr) {

  Qva.GetBinder().BackgroundMgr.SetBackgroundPosition()

  }

};

Not applicable
Author

well so I tried the solution you suggested:

$('#QvAjaxToolbar').prepend('<div>This wont cause scroll issues</div>')


This works in adding the banner without having scroll-bars. However, the problem is the banner overlays the toolbar, so a css attribute of 'margin-top:10px' has to be added to '.ctx-menu' (class associated with the toolbar) which results in infinite scrolling still.

Alexander_Thor
Employee
Employee

Can you post the html markup for the banner? Since I have tried on my end and it works, see the attached screenshot.

banner.PNG.png