8

Does anyone know how to get the CSS overflow property to work on a Visualforce tab? The concept I'm going for is possible, as demonstrated on JSFiddle. However, I cannot seem to apply the same concept to my Visualforce tab.

All I want to do is to keep the main section of the window stable, while allowing the user to scroll horizontally via an overflow div to see content that's too wide for the current window.

But what ends up happening right now is my page just blows up horizontally, and users end up seeing the "nether" UI (screenshot below).

Salesforce "nether" UI

6

The body of a Visualforce Page is enclosed in a table cell, whose children won't respond to overflow without having a known width. But by setting a width you would lose the fluidity of the page. Catch 22!

Given this, I humbly recommend:

  1. use sidebar="false" so the page becomes a single-cell table, and

  2. put table-layout: fixed on the body table, so the remaining cell responds to overflow,

overflow screenshot

Overflow.page:

<apex:page sidebar="false">
    <style>
        table#bodyTable {
            table-layout: fixed;
        }
    </style>
    <div style="border:1px solid red; overflow: auto;">
        extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;
        extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;
        extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;extremely&nbsp;wide&nbsp;content&nbsp;
    </div>
</apex:page>

Usual caveat applies: messing with Salesforce markup is unsupported; it may change at any time.

  • 1
    user320, thank you very much! Adding a custom stylesheet with the fix you suggested worked like a charm. I verified in IE10, Firefox and Chrome on Windows 8 that the CSS produces the desired scrollbar: screencast.com/t/YaIUmdw2 – Marty C. Jan 29 '14 at 2:16
  • no wuckers mate, thanks for circling back to share the end result @MartyC. – bigassforce Jan 29 '14 at 2:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.