Rank 1
RadMenu js scripts automatically set menu items style.width to terrible 600+px in my vertical menu. This behaviour only seen in IE8 and Opera 10; in FF 3.6 links widths are computed correctly (based on parent li element css style as ".RadMenu_Default .rmVertical li { width: 223px;}" in external css file, i guess). Looks like this value - 600+px - is based on the most wide link text. Such links - with lots of text inside - are expected to be shown like normal text ("white-space: normal"), in theirs 223px.
If I just delete link's "style" property in Dragonfly (FireBug analogue for Opera), that menu item gets desired view.
The question is - is there a way to turn off automatic width adjusement for link's? Or some other method to solve the problem.
hanks in advance.
5 Answers, 1 is accepted
I tried to reproduce this issue in Opera but to no avail. Could you please send us the definition of the menu which will help us replicate the problem? Thanks
Regards,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
Hello, Yana.
Here's XML deserialization of a Telerik.Web.UI.RadMenu object:
| <?xml version="1.0" encoding="utf-8"?> |
| <Menu Flow="Vertical" CssClass="PopupLinksMenu"> |
| <Group> |
| <Item Text="item1" Value="48|1019347|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019347/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item2" Value="48|1019371|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019371/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item3" Value="48|1019380|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019380/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item4" Value="48|1019394|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019394/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item5" Value="48|1019418|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019418/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item6" Value="48|1027844|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1027844/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item7" Value="48|1027960|/Portals/_default/Skins/red/|11" NavigateUrl="http://localhost/r40/tabid/1027960/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item8" Value="48|1033468|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1033468/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item9" Value="48|1036392|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1036392/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item10" Value="48|1036508|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1036508/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item11" Value="48|1036594|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1036594/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item12" Value="48|1036843|/Portals/_default/Skins/red/|11" NavigateUrl="http://localhost/r40/tabid/1036843/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item13" Value="48|1037815|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1037815/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item14" Value="48|1038947|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1038947/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item15" Value="48|1019450|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019450/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item16" Value="48|1019390|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019390/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item17" Value="48|1039660|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1039660/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item18" Value="48|1028471|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1028471/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item19" Value="48|1019453|/Portals/_default/Skins/red/|11" ExpandMode="WebService" NavigateUrl="http://localhost/r40/tabid/1019453/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| <Item Text="item20" Value="48|1019376|/Portals/_default/Skins/red/|11" NavigateUrl="http://localhost/r40/tabid/1019376/language/ru-RU/Default.aspx" ExpandedCssClass="PopupLinksMenuItemExpanded" ImageUrl="/Portals/_default/Skins/red/img/arrow01.gif" HoveredImageUrl="/Portals/_default/Skins/red/img/arrow010.gif" CssClass="PopupLinksMenuItem" /> |
| </Group> |
| </Menu> |
I've replaced 'Text' attribute value - the original contains russian text, so i guess its contents does not matter. The longest menu item text had 53 symbols including spaces.
Here are compiled meaning css attributes for a:link, as shown in firebug:
| width: 132px; |
| height: 11px; |
| padding-top: 4px; |
| padding-right: 5px; |
| padding-bottom: 6px; |
| padding-left: 30px; |
| border-top-width: 0; |
| border-right-width: 0; |
| border-bottom-width: 0; |
| border-left-width: 0; |
| position: static; |
| display: block; |
| visibility: visible; |
| z-index: auto; |
| overflow-x: visible; |
| overflow-y: visible; |
| white-space: normal; |
Also, firebug shows an inline 'style="width: 132px"' a:link attribute, which is absent in server output. So i guess it is added dynamically by RadMenu client js scripts.
Here are compiled meaning css attributes for a:link, as shown in dragonfly (Opera DOM/CSS debugger, firebug analogue):
| width: 353px; |
| -o-transform-origin: 178.5px 5.5px; |
| display: block; |
| float: none; |
| height: 11px; |
| list-style-image: none; |
| list-style-position: outside; |
| list-style-type: none; |
| padding-bottom: 0px; |
| padding-left: 0px; |
| padding-right: 4px; |
| padding-top: 0px; |
| rightright: 387px; |
| top: 4px; |
| whitewhite-space: normal; |
Inline a:link style added by client script sets width to 357px in Opera.
Here's a copy-paste from dragonfly DOM inspector for one of the menu items:
| <li class="rmItem " style="z-index: 0"> |
| <a href="http://localhost/r40/tabid/1033468/language/ru-RU/Default.aspx" class="rmLink PopupLinksMenuItem" style="width: 357px"> |
| <img alt="" src="http://localhost/Portals/_default/Skins/red/img/arrow01.gif" class="rmLeftImage"/> |
| <span class="rmText rmExpandRight">itemX</span> |
| </a> |
| </li> |
The same problem with Internet Explorer 8.
Unfotunately its web developer tools can not show dynamically added/changed values, but in a 'layout' tab for links i see 381px width. Of course too-wide menu items are seen right on the page =).
And at last, here are my CSS definitions for the link:
| .RadMenu_Default .rmVertical .rmFirst a.rmLink:link, |
| .RadMenu_Default .rmVertical .rmFirst a.rmLink:hover, |
| .RadMenu_Default .rmVertical .rmFirst a.rmLink:active, |
| .RadMenu_Default .rmVertical .rmFirst a.rmLink:visited, |
| .RadMenu_Default .rmVertical a.rmLink:link, |
| .RadMenu_Default .rmVertical a.rmLink:hover, |
| .RadMenu_Default .rmVertical a.rmLink:active, |
| .RadMenu_Default .rmVertical a.rmLink:visited |
| { |
| border: medium; |
| color: #003366; |
| display: block; |
| font-family: Verdana; |
| font-size: 10px; |
| font-weight: bold; |
| line-height: 1.1em; |
| padding: 4px 5px 6px 30px; |
| text-decoration: none; |
| whitewhite-space: normal; |
| width:132px; |
| } |
So as far as you see, scripts in IE and Opera set incorrect width for the menu item.
I'm still not able to observe the issue, could you please send us a live url where the problem is reproduced? Thanks
Regards,
Yana
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
Hello, Yana.
Unfortunately all development is in the intranet now, so i can not provide an internet link to show the effect.
Actually i'm not even sure if these are RadMenu java scripts, that set width to menu items. But, if they are, I just need the way to turn off this feature.
Rank 1
I'v solved the problem.
After attentive analysis of RadMenu js code i've found several "private" methods:
Telerik.Web.UI.RadMenu._adjustRootItemWidth
Telerik.Web.UI.RadMenu._getMaxRootItemWidth
Telerik.Web.UI.RadMenu._setMaxRootItemWidth
They do all the job around setting menu links width. Unfortunately redefining _adjustRootItemWidth to "function(){return true}" did not help me, menu items stayed too wide. So, i've inspected default styles and found white-space:nowrap for main RadMenu div. This style was inherited by links under IE, despite of their white-space was set to normal in my css files. So i defined white-space as normal for div.RadMenu element and it worked.