Jump to content
  • 0

Missing Scroll Bars on data page


Inovix
 Share

Question

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

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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');

Link to comment
Share on other sites

  • 0

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');

Link to comment
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...
 Share

×
×
  • Create New...