Fluid layout (color scheme) in DocLib portlet wraps menu items in 'list' mode

• Type: Bug
• Status: Closed
• Resolution: Reorganized
• Affects Version/s: 2.0.2 CE GA1, 2.0.3 EE
• Fix Version/s: None
• Component/s: Social Office Site, Social Office Site > Documents, Social Office Site > Site Look & Feel
• Labels:
  • document-library
  • menu
  • so-theme
  • social_office
  • theme
• Environment: Windows 7, ; Chrome 22.0.1229.79 m, ; IE8 8.0.7601.17514 64-bit; ; tested locally with ee-6.1.x and on in.liferay.com

When you select Fluid layout (color scheme) in Document Library (on some SO site, to be sure it uses so-theme) and you select List View, the menus from each file / folder entry are wrapped, see screenshot. This does not happen in fixed layout of so-theme.

Steps to reproduce:
(1) login to SO
(2) switch to fluid layout (stretched from left to right)
(3) go to some SO site -> Documents
(4) select List View mode (next to Search dialog in DocLib portlet)
(5) reload the page, to make sure that fluid layout and list mode sticks and is freshly rendered
(6) invoke context menu on some file / folder

Results:
Menu is wrapped, sometimes after icon, sometimes between words of menu items.

When you switch to fixed layout, invoke the menu, then switch back to fluid and invoke menu again (without full reload of page) the menu is rendered correctly. Seems that the AUI componenet rendering the menu does not initially know the width of the items, so it uses some default and computes the menu position (CSS's left, inline on <div> with menu) accordingly. But when the portlet stretches to the right side of browser, there's not enough space for the menu and browser wraps the content.

I tried to set some min-width on the '.lfr-menu-list', then no-wrap on '.lfr-menu-list a'. Both worked fine in Chrome, but not in IE. Wrapping was fixed by both in IE, but both also caused problem in IE8 – after menu was invoked, the whole page markup moved 1 pixel left in IE, and horizontal scroll bar appeared in browser.