Jump to content
  • 1

Top and bottom scrollbar on report data page?


Question

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

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.

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

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.

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