Missing Scroll Bars on data page

[Inovix]

We've been creating and managing an application for a customer over the past year or so and the application now consists of several data pages, all of which are published and embedded into a WordPress website which we've confgured as a secure portal for their staff use.

Because of the way some of the datapages have had to be configured, they are quite wide in their content, which isn't a problem for users with a large screen monitor, however, laptop users have been unable to 'scroll' the page to access content what was off screen.

A while ago, using this forum, I saw an article that described how to add a 'scroll bar' to the top and/or bottom of a Data Page by applying some code to the header and footer.

Here's what we applied:

For the header ---

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

 

and the footer - 

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

 

Adding this code to header and footer of the datapage did resolve our issue and users with smaller screens (laptops etc) could scroll across and see all content within the data page.

The customer has alerted us today that one of the data pages does not have the scroll bar present and is therefore unable to see the full width of that page.

We've checked that the script is present in the header and footer areas of the data page and indeed it is.  We've also checked that "Enable Responsive" is not  selected for the data page as I understand that can cause such issues?

Having compared the edit screens of a working scroll bar data page alongside the non-working scroll bar data page, we cannot see any differences between the two that might cause this issue.  We're now struggling to understand why the above script applies a scroll bar to all but one of our data pages and would appreciate some expert help on this.

many thanks in advance ...

[skcombs]

I had the same problem in Wordpress v3.xxx.  I tried this suggestion to wrap the embedded Caspio code in a div, where I set the width to a percentage.  And you need to disable RESPONSIVE on the datapage.  But it still  failed because Wordpress stripped out the div tags in my HTML code.

<div style=”width: 100px; height: 100px; overflow: auto”>

<!–Embedded Deploy Code–>

</div>

If that is what you see too, then edit your theme's functions.php and add this function to stop WP from removing div tags, and other tags as well:

// stop wp removing ALL Html tags
function override_mce_options($initArray) {    $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

[skcombs]

I had the same problem in Wordpress v3.xxx.  I tried this suggestion to wrap the embedded Caspio code in a div, where I set the width to a percentage.  And you need to disable RESPONSIVE on the datapage.  But it still  failed because Wordpress stripped out the div tags in my HTML code.

<div style=”width: 100px; height: 100px; overflow: auto”>

<!–Embedded Deploy Code–>

</div>

If that is what you see too, then edit your theme's functions.php and add this function to stop WP from removing div tags, and other tags as well:

// stop wp removing ALL Html tags
function override_mce_options($initArray) {    $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

[MonicaT]

I had the same issue, the code worked on one page and not the other.  I check my settings and it was the sticky header and freeze column pane.  Once I removed those settings the double scroll worked.  Caspio do  you have a possible solution? 

[RuisiHansamu]

Hi there, maybe you can check here : 

as this has a similar forum post.