Details
-
Type:
Improvement
-
Status: Closed
-
Priority:
Major
-
Resolution: Fixed
-
Affects Version/s: None
-
Fix Version/s: EE-4.0.0.GA, EE-3.3.0.GA_P03, 4.1
-
Component/s: ACE-Components
-
Labels:None
-
Environment:All
-
Assignee Priority:P3
-
Support Case References:Support Case #12989 - https://icesoft.my.salesforce.com/5007000000kxFTq
-
Affects:Compatibility/Configuration
Description
At the moment the width is set to 150px by default.
Activity
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
Krashan, as I said before. The first rule you suggested (top: 0) is valid and has already been committed to our code. Thank you.
The second rule (display: block; ) causes other styling issues that are visible in our internal test applications. And these issues are visible in the other menu components as well (the contents of the menus are stretched to take the entire width of the page). It might look ok in the showcase application, but that might be because of other custom styling in that application in particular.
The ace:menuBar component, including the root menu, now only takes as much width as it needs, without stretching to the end of the page. This was done on purpose. However, it's debatable whether the root menu of ace:menuBar should take the whole width of the page (as before) or just take no more than it needs. We will review that in a meeting, In any case, to stretch the root menu of ace:menuBar the following rule would be more appropriate, in order to avoid affecting other menu components.
.ice-ace-menu-bar > .wijmo-wijmenu-horizontal {
display:block;
}
r44001: committed some fixes to the 3.3 EE maintnenance branch: fixed IE7 issue with submenu headers in plain menus not stretching to the largest width; fixed IE7 issue with deeper menu levels in sliding menus having an indentation; added styling rules to make the root node of ace:menu display like a block element, as before (and without stretching the menu contents).
r44292: removed extra padding and margins from ul element in all menus; added distinctive class name to root node of ace:menuButton (in 3.3 EE maintenance branch).
Marking as fixed. Verified all styling changes in the 4.0 trunk and in the 3.3 EE maintenance branch. The only issue that couldn't be fixed is with the tiered ace:menu on IE7 (3.3 EE maintenance branch). The left arrow icon appears next to the label, instead of appearing at the right edge. Functionality is still normal.
While working on this JIRA, an issue with sliding menus was found, which could be reproduced before these styling changes. It is described in ICE-10600.
Verified no additional issues (besides ICE-10600) found. ICEfaces EE-3.3.0 maintenance branch r44364, ICEfaces EE-4.0.0 Jenkins build 5. Tomcat 7, IE 11, FF 34, Chrome 41.
Committed fix to 4.0 trunk at revision 43578 and to 3.3 EE maintenance branch at revision 43579.
After trying different approaches, using the CSS property white-space:nowrap; worked best. There's still the issue that when using icons, they won't appear aligned with the label when the label is the widest one in a submenu, even though they are supposed to be aligned by using white-space:nowrap, this doesn't happen because of other necessary CSS involved. Anyway, all this can be fixed at the app level with custom CSS and other workarounds.