Top and bottom scrollbar on report data page?

[roattw]

Have a very wide report page and users request to have 250 records per page.  Scrollbar appears on bottom but we would also like on on the top.  Can two scroll bars be achieved?  Thanks

[Vitalikssssss]

Hi @roattw,

You can implement the solution from this topic .

1. Disable AJAX loading of Datapage;

2. Place the following code into Datapage Header:

<style>
.wrapper1, .wrapper2 { width: 100%; overflow-x: scroll; overflow-y: hidden; }
.wrapper1 { height: 20px; }
.wrapper2 {}
.div1 { height: 20px; }
.div2 { overflow: none; }
</style>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="wrapper1">
	<div class="div1"></div>
</div>
<div class="wrapper2">
	<div class="div2">

3. Place the following code in Datapage Footer:

	</div>
</div>
<script>
$(function () {
    $('.wrapper1').on('scroll', function (e) {
        $('.wrapper2').scrollLeft($('.wrapper1').scrollLeft());
    }); 
    $('.wrapper2').on('scroll', function (e) {
        $('.wrapper1').scrollLeft($('.wrapper2').scrollLeft());
    });
});
$(window).on('load', function (e) {
    $('.div1').width($('table').width());
    $('.div2').width($('table').width());
});
</script>

Make sure that you disable HTML editor otherwise it breaks the code in the Header.

Hope this helps.

Regards,

vitalikssssss

[roattw]

Vitalikssss

Thanks for the reply, sry for delayed response!   The code did place the top scroll bar but it had nu functionality.  Shows gray bar, scroll advance triangles, but no actual scrol fucntionality.

 

[Vitalikssssss]

Hi @roattw,

Please check your Datapage header.

I think below "div"s were closed by HTML editor.

<div class="wrapper2">
	<div class="div2">

You should disable the HTML editor prior inserting the snippet of code. 

Hope this helps.

Regards,

vitalikssssss

[rgiljohann]

@Vitalikssssss, this is a great solution. Is there something else you have to do 'width($('table') if you are actually using a pivot table? I tried to implement your solution as is, and it inserts a scrollbar on top, but it is a full block and does not scroll at all. Please see HERE. 

I am wondering if the width does not work because I am using a pivot table instead of a tabular report.

[Vitalikssssss]

Hi @rgiljohann,

My previous solution is a bit outdated because Caspio introduced their built-in event handlers. 

Please try the following updated script:

1. Datapage Header:

<style>
#doublescroll
{
  overflow: auto; overflow-y: hidden; 
}
#doublescroll p
{
  margin: 0; 
  padding: 1em; 
  white-space: nowrap; 
}
</style>

<div id="doublescroll">

2. Datapage Footer:

</div>
<script type="text/javascript">
function DoubleScroll(element) {
    var scrollbar = document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow = 'auto';
    scrollbar.style.overflowY = 'hidden';
    scrollbar.firstChild.style.width = element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop = '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll = function() {
    element.scrollLeft = scrollbar.scrollLeft;
    };
    element.onscroll = function() {
    scrollbar.scrollLeft = element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
}




document.addEventListener('DataPageReady', DoubleScroll(document.getElementById('doublescroll')));
</script>

This should help.

Regards,

vitalikssssss

[rgiljohann]

Perfect. Thanks!

[roattw]

Not working for me but I think its because I have other <div> elements in header and other closing </div> elements in footer and its confused on the order the div tags are appearing and closing.

 

[roattw]

Still not quite there.  When report page first loads no scrollbar.  If I choose Grid Edit, no scrollbar.  But once I exit out of Grid Edit THEN the scroll bar appears.  Additionally, the top one doesnt scroll all the way to the right like the bottom one does, it stops before the end.