Redmine

While creating a theme for my Redmine installation, I ran into an issue with the progress bars - for example on the Roadmap page (/projects/roadmap/projectname).

Basically the three parts of the progress bar were all the same width, even though one was clearly supposed to be longer than the others (86% vs 9% and 4%).

I tracked the issue down to my theme having a

td { width: auto }

CSS rule, which is needed elsewhere. width: auto is the default value for width, and let's the browser calculate the actual width, but it clearly wasn't working in this case.

Redmine currently sets the width of table cells using the width HTML attribute, like so:

<td class="closed" width="86%;"></td>

Problem with this is, that any CSS rule - even one with as low a specificity as mine - will override the value specified in pure HTML. This means the table cells were set to width: auto, and the browser then calculated them all to be roughly 33% wide.

By changing the way the progress bar sets the table cell widths to using inline styles like so:

<td class="closed" style="width: 86%;"></td>

prevents any stray CSS declarations from involuntarily overriding those widths. It is also analog to how the width of the full progress bar is set.

The attached patch changes the ApplicationHelper#progress_bar method to use this approach.

Details:
Revision: 2082
Browser: Firefox 3 on Mac OS X
Ruby version 1.8.7 (i486-linux)
RubyGems version 1.2.0
Rails version 2.1.1
Active Record version 2.1.1
Action Pack version 2.1.1
Active Resource version 2.1.1
Action Mailer version 2.1.1
Active Support version 2.1.1