Agenda clipping problem - browser-specific (?)

Becoming the FTH go-to guy here in District 38, I was approached by a fellow Toastmaster at this past weekend's spring conference with a situation I'd not yet seen. When she accesses her club agenda, the right side of it is clipped in the on-screen window. She has to use the horizontal scroll bar to move left and right. We tried the brower's increase/decrease font (Ctrl-Plus and Ctrl-Minus keys) function to no avail. Nothing obvious on the agenda display area when logged in as Admin. I don't have this problem with either of my clubs using Firefox or Safari. She uses Chrome. I forget the exact test details but it seems to me like it's specific to her FTH account and perhaps not a specific browser.

Suggestions on how to remedy?

Art

Art,

We ran across this with another club and there was some hidden characters in the role descriptions, but once corrected I could not replicate it.

Can you share the club number so we can look at it?

Roger,
The member got back to me today. Club is #2556837, Xfinity Communicators.

Art

I am not seeing any issues when looking at your agenda using firefox. What browser are you using?

Hi,
On my Apple MacBook Pro, it looks good in Firefox (v37.0.2) but clipped in Safari (v8.0.5). On my Windoze 7 box, it looks good in Firefox but clipped in Google Chrome (v43.0.2357.81 m).

Art

Art,

I looked into this.

Bottom Line: I believe this is related to the long URLs in the middle columns intended to provide reference pages for the members regarding the different meeting roles.

The issue is caused by a combination of browser word-wrapping behavior and how the table width is determined.

Different browsers will do word-wrapping in very slightly different ways that the average user will not notice, except in outlier cases like this. (As you see by viewing in different browsers.) The really long word (or URL in this case) is one of those outlier cases that tends to cause problems.

I already have the table set for 100% width. However, some browsers treat this as fixed and unchangeable, and other browsers treat it as a "suggested target width".

I can tell the browser to break in the middle of words, but that will likely cause problems for other parts of the text in that column.

I can tell the browser not the widen the middle column to accommodate the URLs, but you would see that those URLs are just extended to the next column (at least I see that in IE11).

In the future, I probably will put % limits on the column widths instead of allowing them to float like now. However, that will require some testing with the layout in different browsers to make sure it doesn't break something else. (table layouts can be very challenging)

In the meantime, this club can either put a space somewhere in the middle of the URLs to tell the browser where to break the line, or they can make these into real, live links using the [/url] bbcodes that I added support for a few months ago and posted a message about. If they did the [/url] approach, the links would work, and they could show a shorter piece of text in place of the url (e.g., a link entitled Toastmaster Role Description). The latter would be my recommendation.

There is an online reference (not ours) for using the [/url] bbcode: www.bbcode.org/examples/?id=9