Over-sized content and nicer panels

Sometimes content is too wide to fit on screen and causes nasty horizontal scroll bars - this quick tutorial explains how to mitigate some of these issues and make common panels look nicer at the same time...

The CSS in this tutorial requires a standards-compliant web browser. If you're using Microsoft's quick preview tool (Internet Explorer) some of this won't have effect.

Getting Started

Ok, let's get started with the most common problem - content that's too wide. Add the following to your Custom CSS:

/* ------ oversized content ------ */
.atb-content img {
  max-width: 100%;
}
.atb-content .panel {
  overflow: auto;
}
td.pagebody > table {
  table-layout: fixed;
}

This does three things:

• Ensures that images do not take up more than 100% of the available width in the content panel. If they are bigger, the browser will scale them down to fit!
• In cases where content is unavoidably large, scroll the content area instead of the whole web page - this ensures that most content will still wrap normally and be viewable without scrolling.
• Prevent the browser from re-sizing the page body width

Code and NoFormat macros

The code macro and noformat macro are notorious for creating content that's too wide to fit on screen - the following CSS will help tame them and make them look a bit nicer at the same time:

/* ------ better code panels ------ */
div.code,
div.preformatted {
  -moz-border-radius: 6px 6px;
  -webkit-border-radius: 6px 6px;
  background-color: #F0F0F0;
  border: 1px solid #D4D4D4;
  border-radius: 6px 6px;
  margin-left: 0;
  margin-right: 0;
  max-width: 730px;
}
div.code .panelContent,
div.preformatted .panelContent {
  background-color: transparent;
}

Attachments macro (and attachments screens)

The attachments macro is another trouble causer as it's designed for full-width themes on a big monitor. For a tutorial on taming this macro, see our blog.

Nicer Panels

There are four panels that are regularly used in wiki pages:

With some subtle tweaks we can make them look much nicer (as shown above):

/* ------ nicer panels ------ */
table.tipMacro,
table.infoMacro,
table.warningMacro,
table.noteMacro {
  -moz-border-radius: 6px 6px;
  -webkit-border-radius: 6px 6px;
  border-radius: 6px 6px;
}
table.tipMacro td,
table.infoMacro td,
table.warningMacro td,
table.noteMacro td {
  padding:10px 10px;
}

By adding round borders and improved padding, the macros look much cleaner.