This is a migrated thread and some comments may be shown as answers.

Turn off automated width calculation for menu items.

5 Answers 95 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Dmitry Selverstov
Top achievements
Rank 1
Dmitry Selverstov asked on 31 May 2010, 06:53 AM

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

Sort by
0
Yana
Telerik team
answered on 02 Jun 2010, 01:07 PM
Hi Dmitry,

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.
0
Dmitry Selverstov
Top achievements
Rank 1
answered on 03 Jun 2010, 04:21 AM

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:

width132px;
height11px;
padding-top4px;
padding-right5px;
padding-bottom6px;
padding-left30px;
border-top-width: 0;
border-right-width: 0;
border-bottom-width: 0;
border-left-width: 0;
positionstatic;
displayblock;
visibilityvisible;
z-indexauto;
overflow-x: visible;
overflow-y: visible;
white-spacenormal;
 

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):

width353px;
-o-transform-origin: 178.5px 5.5px;
displayblock;
floatnone;
height11px;
list-style-imagenone;
list-style-positionoutside;
list-style-typenone;
padding-bottom0px;
padding-left0px;
padding-right4px;
padding-top0px;
rightright387px;
top4px;
whitewhite-spacenormal;
 

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">
    <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
{
    bordermedium;
    color#003366;
    displayblock;
    font-familyVerdana;
    font-size10px;
    font-weightbold;
    line-height: 1.1em;
    padding4px 5px 6px 30px;
    text-decorationnone;
    whitewhite-spacenormal;
    width:132px;
}
 

So as far as you see, scripts in IE and Opera set incorrect width for the menu item.

0
Yana
Telerik team
answered on 08 Jun 2010, 02:17 PM
Hello Dmitry,

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.
0
Dmitry Selverstov
Top achievements
Rank 1
answered on 11 Jun 2010, 01:12 PM

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.

0
Dmitry Selverstov
Top achievements
Rank 1
answered on 11 Jun 2010, 02:22 PM

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.

Tags
Menu
Asked by
Dmitry Selverstov
Top achievements
Rank 1
Answers by
Yana
Telerik team
Dmitry Selverstov
Top achievements
Rank 1
Share this question
or