Issue Details (XML | Word | Printable)

Key: SAK-3804
Type: Bug Bug
Status: Closed Closed
Resolution: Fixed
Priority: Minor Minor
Assignee: Unassigned
Reporter: Stephen Marquard
Votes: 0
Watchers: 1
Operations

If you were logged in you would be able to see more operations.
Sakai

Long URLs do not wrap, creating horizontal scrollbar in Resources

Created: 10-Feb-2006 04:44   Updated: 27-Oct-2009 15:12
Component/s: Resources
Affects Version/s: 2.1.1, 2.1.2, 2.2.0, 2.2.1, 2.2.2, 2.2.3, 2.3.0, 2.3.1, 2.3.2, 2.4.0, 2.4.1, 2.5.0, 2.5.2, 2.5.3
Fix Version/s: 2.4.x, 2.5.4, 2.6.0

Time Tracking:
Not Specified

File Attachments: 1. Text File patch-to-2_4.txt (2 kB)

Image Attachments:

1. screenshot-1.jpg
(137 kB)
Environment: Client browser FF 1.5.0.1, Win XP SP2

2.6.x Status: None
2.5.x Status: Resolved
2.4.x Status: Resolved


 Description  « Hide
In Resources / Revise properties (chef_resources_edit.vm), long URLs do not wrap when viewed in FireFox - see attached screenshot. In IE the problem is usually averted because URLs will wrap at "-", but a long URL without a "-" would also not wrap.

This causes the URL to go off the page and a horizontal scrollbar to be created. It also squashes up the other table columns.

Research into possible solutions shows 2 options which would work across both IE and FF given current support CSS support in those browsers:

1. CSS overflow tag using an enclosing <div>, e.g.:

 <td>
<div style="overflow:hidden;"><a href="$item.url" target="_blank" title="[$tlang.getString('gen.newwin')]">$item.url</a></div>
</td>

This has the disadvantage of not showing the whole URL to the user, though one can still right-click and use Copy Link Location.

Another setting of overflow will create a scroll-bar in-place, which looks ugly.

2. Using the <wbr> element to flag breakpoints after /, such that the rendered output looks like:

<a href="http://nightly.cet.uct.ac.za:8080/access/content/group/0c11029c-3108-44f7-8063-300829b37cdd/hslogo.png" target="_blank" title="[New window]">http://nightly.cet.uct.ac.za:8080/&lt;wbr&gt;access/&lt;wbr&gt;content/&lt;wbr&gt;group/&lt;wbr&gt;0c11029c-3108-44f7-8063-300829b37cdd/&lt;wbr&gt;hslogo.png&lt;/a>

<wbr> works in both browsers, but is however not standardized and therefore technically invalid HTML.


 All   Comments   Work Log   Change History   Subversion Commits   git Commits      Sort Order: Ascending order - Click to sort in descending order
Gonzalo Silverio added a comment - 14-Feb-2006 11:19
The use case for this display boils down to providing the user with a selectable and copiable URL if I am not mistaken.

If this is true, then we cannot use option 1 above as some users will not think of the "copy link: option. We cannot use option 2 either as the copy operation will include $crlf in most os.

A third option is to a) make the font smaller, and b) wrap the URL in a block with overflow:auto. a) will minimize the number of cases where the displayed URL will be wider than the viewport, and b) will allow for copying when it is without forcing the viewport to grow wider.

What do you think?

Stephen Marquard added a comment - 15-Feb-2006 14:19
Actually option 2 won't include a CRLF in the copied output - the <wbr> is not an actual <br>, it's a hint to the browser as to where it can break the line. It's equivalent to copying normally wrapped text. The main concern with #2 is that <wbr> is not compliant XHTML.

Make it smaller is probably good. overflow:auto will create a horizontal scrollbar if it needs to which I think looks a bit ugly, but is a possibility.

Mark Notess added a comment - 19-Oct-2006 12:52
This is really a nasty problem--I wouldn't consider it minor. The horizontal scrollbar adds an extra vertical scrollbar, making editing of long pages, such as we are developing for Sakaibrary, very difficult.

What about putting the URL in a read-only text field? Text fields can be scrolled. Other options are to generate short URLs like Confluence does, or provide a "copy URL" button.

Gonzalo Silverio added a comment - 23-May-2008 11:50
Sorry this took so long. I put the URL inside of a fixed width textarea, provided link to select the text and a link to launch URL in a new window.

This has been tested with the default skin, window set at 850px wide, no scrollbar.



Peter A. Knoop added a comment - 21-Jun-2008 06:38
Gonzalo, doesn't look like you're an active watcher on this issue at the moment, so I'm just re-assigning it to you so you'll see Steve's comment above, and consider incorporating it into the fix. Thanks.

Gonzalo Silverio added a comment - 23-Jun-2008 09:10
Steve,

The reason I added the select() to the link was because it seemed clearer. If the action is on the textarea then we will also need to add a "click on the text to select" no?


Gonzalo Silverio added a comment - 03-Jul-2008 09:10
patch for 2.4

Gonzalo, this looks great, thanks!

Committed to 2.4.x

svn commit -m "
SAK-3804 Long URLs do not wrap, creating horizontal scrollbar in Resources"
Sending content-bundles/types.properties
Sending content-tool/tool/src/webapp/vm/resources/sakai_properties.vm
Transmitting file data ..
Committed revision 49094.


Jean-François Lévêque added a comment - 06-Oct-2008 08:18
This works fine with sakai/trunk on Oracle.

Jean-François Lévêque added a comment - 02-Dec-2008 07:01
2.5.x merge r54755