Turn off automated width calculation for menu items.

6 posts, 0 answers
  1. Dmitry Selverstov
    Dmitry Selverstov avatar
    4 posts
    Member since:
    May 2010

    Posted 31 May 2010 Link to this post

    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.

  2. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 02 Jun 2010 Link to this post

    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.
  3. Dmitry Selverstov
    Dmitry Selverstov avatar
    4 posts
    Member since:
    May 2010

    Posted 02 Jun 2010 Link to this post

    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.

  4. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 08 Jun 2010 Link to this post

    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.
  5. Dmitry Selverstov
    Dmitry Selverstov avatar
    4 posts
    Member since:
    May 2010

    Posted 11 Jun 2010 Link to this post

    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.

  6. Dmitry Selverstov
    Dmitry Selverstov avatar
    4 posts
    Member since:
    May 2010

    Posted 11 Jun 2010 Link to this post

    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.

Back to Top