CSS logoWe previously made an entry about long text strings overlapping table cells.  It was time to relook at the problem again after we saw a few more instances on our site.

The problem is quite common and has been mentioned in various articles upon the web for many years.  Solutions have ranged from the use of code to add extra spaces into the text fields, sometimes using ‘hidden’ characters, to various suggested CSS additions, many of which have browser dependencies.

This article on Stackoverflow summaries the suggestions quite adequately, but unfortunately didn’t provide a suitable solution.

Finally I discovered an article which describes the problem perfectly with examples. It is quite old (2007) but still holds true even today, with many revisions of browsers later.

In our case the final table cell was overlapping the right hand side menu and module displays, with the modules on top obscuring the table cell contents. We resolved it by using the suggestion in the article by changing to a fixed width table. Now the word-break could work.  It does mean that some of the other columns are slightly larger but it does produce a more professional output on the site.

This change will be implemented in latter releases of the Issue Tracker component.

Template Override

Whilst investigating this problem we had forgotten that we had implemented a CSS table override for the component so it is perhaps worth mentioning that here as well.  The CSS override is created by creating a file in the templates directory under template_name/media/com_issuetracker/css/ named issuetracker.css.  A copy of the distributed CSS file would serve as a starting point.  When changes are made to this file they take effect and override those in the media/com_issuetracker/css/issuetracker.css file.  This means that any changes you make would still apply even when/if the component is upgraded.  It is a convenient place to test out small CSS changes.