Add overflow control to pre and code blocks via CSS

XMLWordPrintable

    • Type: Suggestion
    • Resolution: Fixed
    • 2.3
    • Component/s: None
    • Environment:
      WebLogic 7, JDK 1.3.1, Solaris 8, Oracle 9i, Confluence 1.4.4.

      Currently <code> and <pre> blocks in Confluence have no limits set on content that overflows the normal page width. Consequently blocks with long lines of text can push the width of the entire web page to an arbitrary width. The user must scroll horizontally to read every line on the page, or to access navigational links on the right side.

      Fortunately the fix is easy: add "pre, code

      { overflow: auto; }

      " to the CSS for Confluence. This tiny CSS snippet will add a horizontal scrollbar when a block contains a line that exceeds the normal block width. All of the content in the block is still accessible and page widths don't blow up.

        1. without_overflow.jpg
          211 kB
          Kyle Adams
        2. with_overflow.jpg
          214 kB
          Kyle Adams

            Assignee:
            Mike Cannon-Brookes
            Reporter:
            Kyle Adams
            Votes:
            5 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0.25h
                0.25h
                Remaining:
                Remaining Estimate - 0.25h
                0.25h
                Logged:
                Time Spent - Not Specified
                Not Specified