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. with_overflow.jpg
          214 kB
          Kyle Adams
        2. without_overflow.jpg
          211 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