Jump to content
  • 1
roattw

Top and bottom scrollbar on report data page?

Question

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

Share this post


Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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.

2018-11-20_9-40-52.thumb.png.b1750c30e0965a81f93fcf30e27a164b.png

 

Share this post


Link to post
Share on other sites
  • 0

@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.

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

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.

 

Share this post


Link to post
Share on other sites
  • 0

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...