All Adaptavist Apps

The selected context is not a valid hierarchical page

Blog from April, 2009

Fixing the attachments screen layout

As anyone who has ever tried customising the page attachments screen will know, it's a nightmare. I decided to take a look to see what could be done to improve the situation...

The problem

The page attachments screen is designed with one theme in mind - the default Confluence theme. It's designed to only work on screen resolutions above 1024x276. As such, if you have a custom theme you'll often end up with this sort of mess (click thumbnail to enlarge):

Nasty! Our website theme is fixed to 980px width and also has a sidebar which consumes more screen real estate. The Confluence attachments screen is not designed to work with this scenario.

One major problem here is that the HTML and CSS for the upload section is shockingly bad - rather than using a simple table for the file upload boxes and comments, Confluence is using two <div> elements - one of which is floated to the left of the screen. The various input elements are then output in a list (why?!!) which causes havoc with a screen reader.

There's not much we can do about the accessibility - Atlassian will have to use decent semantic markup to solve that issue (Tip: use a table!), but we can sort out the display glitches.

The solution

First, we decided to start with the list of existing attachments - by fixing this we'll also fix the output of the {attachments} macro which suffers the same problem.

It turns out that the CSS to repair the macro is pretty trivial:

table.attachments a,
table.attachments td,
table.attachments th {
  font-size: 10px;
  width: auto;
  white-space: normal;

A smaller font helps long filenames and comments take less screen space, and the auto width and normal word wrapping allow the browser to automatically size the table more effectively.

Next, we turn to the upload section - this required quite a bit of fiddling and we've not even tested it on MSIE yet:

.atb-body #viewAttachmentsDiv input {
  width: auto;
#upload-files {
  width: 70%;
#upload-comments {
  width: 27%;
#upload-comments .stepdesc {
  display: none;

Again, the end result is pretty simple CSS, but it took lots of experimentation to find the most suitable CSS to use. In particular, due to the really bad HTML structure of the uploads section, we had to hide the ".stepdesc" element (a message about comments not exceeding 255 chars) to get the comments boxes further down the list to line up with their upload boxes.

If the upload section used a table, which in this case is far more semantically correct than a bunch of divs and lists, the issues shown earlier probably wouldn't have arisen in the first place.

The result

So, what did our little CSS hacks achieve - let's take a look:

If you're a software developer, don't assume that end-users will be working on full-width layouts on a 30" Apple cinema display. Also, tables are semantically correct in many situations - many web developers seem to be avoiding using tables completely when, in reality, this often results in non-semantic markup for situations like the one described above.

Builder for FREE

In the wake of the Atlassian Starter programme (which has been a runaway success, exceeding its $25k target in the first day), a number of users have been asking if since $5 is 'basically free' whether they could get a free license for builder/bubbles to go with it.

We at adaptavist love the idea of making a difference in the real world, not just by selling great software but actually making a real contribution to the society we live in.

So as an added bonus for those people using a $5 license we have made some changes to our licensing code making builder run for free on their commercial license. We're hoping this will encourage more small businesses to take advantage of the $5 Confluence licenses, raising yet more money for charity ... let's see if we can make it $50k by the end of the week!

You'll need Theme Builder 3.3.4 (or later) to take advantage of this - we should be releasing a final version of 3.3.4 in the coming days however all releases of builder will run for free for 30 days after the creation of the confluence license anyway (so long as you accept the EULA) ... just remember to upgrade to 3.3.4 once it is released or things will suddenly go pear-shaped on you in a week or two.

Free licenses of our plugins are covered under our community support service level.

You can download Builder 3.3.4-M4 which contains support for the FREE atlassian starter license from here