Horizontal Submenu Width and Height Grows

5 posts, 0 answers
  1. Parker
    Parker avatar
    6 posts
    Member since:
    Jun 2005

    Posted 26 Jul 2010 Link to this post

    I need to have the horizontal submenu that has the same width as the 1st main level with the items in the submenu 

    |  Level 1     Level 1a     Level 1b    Level 1c    Level 1d  |
    |            Sublevel 1a1  Sublevel 1a2  Sublevel 1a3          | 

    I've manged to get the initial menus to look and work fine. The problem I'm having is if you hover over the Level 1c and then Level 1b the submenu grows in width and height.  The attached images may help to explain better what is happening.


    |  Level 1     Level 1a     Level 1b    Level 1c    Level 1d  |
    |            Sublevel 1a1  Sublevel 1a2  Sublevel 1a3                     |  width and hieght excedes the boundries.

    Here is my code - any help or insight anyone can give is appreciated.

     
    <script type="text/javascript">
            function itemOpening(sender, args)
            {   
               var SecRow = args.get_item().get_element();
               SecRow.childNodes[1].style.left = - SecRow.offsetLeft + "px"
                 
            }
      </script>
      
    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Horizontal" width="900px" OnClientItemOpened="itemOpening"
        skin="BC2010BLACK" EnableEmbeddedSkins="false" style="float:left;">
        <expandanimation type="InOutQuad" duration="300" />
        <collapseanimation type="InOutQuad" duration="200" />
        <items>
              <telerik:RadMenuItem ID="RadMenuItem43" runat="server" NavigateUrl="~/default.aspx" Text="Home"/>
              <telerik:RadMenuItem runat="server" NavigateUrl="~/OurFirm.aspx" Text="Our Firm" GroupSettings-Flow="horizontal">
              <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"/>
                   <Items>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/FirmCulture.aspx" Text="Firm Culture"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/Innovation.aspx" Text="Innovation"  />
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/Diversity.aspx" Text="Diversity"  />
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/HonorAndAwards.aspx"  Text="Honors and Awards"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/ClientFeatures.aspx"  Text="Client Features"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/CommunityInvolvement.aspx" Text="Community Involvement"/>
                   </Items>
              </telerik:RadMenuItem>
              <telerik:RadMenuItem runat="server" NavigateUrl="~/OurServices.aspx" Text="Our Services" GroupSettings-Flow="horizontal"  >
              <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"/>
                   <Items>
                        <telerik:RadMenuItem IsSeparator="true"  width="50" runat="server" text="" />
                        <telerik:RadMenuItem runat="server"  NavigateUrl="~/ourServices.aspx" Text="Practice Areas"  />
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/ADR.aspx" Text="Alternative Dispute Resolution" />
                        <telerik:RadMenuItem runat="server"  NavigateUrl="~/OurServices.aspx" Text="Industries Served"  />
                   </Items>
              </telerik:RadMenuItem>
              <telerik:RadMenuItem runat="server"  NavigateUrl="~/OurAttorneys.aspx" Text="Our Attorneys"  GroupSettings-Flow="horizontal">
              <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"  />
                   <Items>
                        <telerik:RadMenuItem IsSeparator="true"  width="60" runat="server" text="" />
                        <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneysbypractice.aspx" Text="by Practice" />
                        <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneysbyindustry.aspx" Text="by Industry" />
                        <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneyalphalist.aspx" Text="by Last Name"/>
                        <telerik:RadMenuItem  runat="server" NavigateUrl="~/attorneysbyoffice.aspx" Text="by Office"/>
                        <telerik:RadMenuItem  runat="server" NavigateUrl="~/OurAttorneys.aspx" Text="Search" />
                   </Items>
              </telerik:RadMenuItem>
              <telerik:RadMenuItem runat="server"  NavigateUrl="~/OurOffices.aspx"  Text="Our Offices"  GroupSettings-Flow="horizontal">  
                   <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"  />
                   <Items>
                        <telerik:RadMenuItem IsSeparator="true"  width="20" runat="server" text="" />
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=1" Text="Boca Raton"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=8" Text="Destin"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=2" Text="Fort Lauderdale"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=3" Text="Miami"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=4" Text ="Orlando"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=5" Text="Tallahassee"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=6" Text="Tampa"/>
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/office.aspx?ID=7" Text="West Palm Beach" />
                   </Items>
              </telerik:RadMenuItem>
              <telerik:RadMenuItem runat="server"  NavigateUrl="~/MediaCenter.aspx" Text ="Media Center"/>
                
              <telerik:RadMenuItem ID="RadMenuItem12" runat="server" NavigateUrl="~/EventsandPublications.aspx" Text ="Events and Publications" GroupSettings-Flow="horizontal"
                    <GroupSettings ExpandDirection="Auto" Flow="Horizontal" width="898"  />
                    <Items>
                     <telerik:RadMenuItem IsSeparator="true"  width="420" runat="server" text="" />
                        <telerik:RadMenuItem runat="server"  NavigateUrl="~/caseupdates.aspx" Text="Case Updates"  />
                        <telerik:RadMenuItem runat="server"  NavigateUrl="~/events.aspx" Text="Events"/>
                        <telerik:RadMenuItem runat="server"  NavigateUrl="~/pressreleases.aspx" Text="Press Releases"/>
                        <telerik:RadMenuItem runat="server"  NavigateUrl="~/publications.aspx" Text="Publications"/>
                   </Items>
              </telerik:RadMenuItem>
              <telerik:RadMenuItem runat="server"  NavigateUrl="~/Careers.aspx" Text ="Careers">
                   <GroupSettings ExpandDirection="Auto" Flow="Horizontal"  width="898"/>
                   <Items>
                        <telerik:RadMenuItem IsSeparator="true"  width="600" runat="server" text="" />
                        <telerik:RadMenuItem  runat="server"  NavigateUrl="~/careersattorneys.aspx" Text ="Attorneys" />
                        <telerik:RadMenuItem runat="server"  NavigateUrl="~/careerslawstudents.aspx" Text="Law Students"    />
                        <telerik:RadMenuItem runat="server" NavigateUrl="~/careersstaff.aspx" Text="Staff"/>
                  </Items>
              </telerik:RadMenuItem>
      </items>
    </telerik:RadMenu>
  2. Parker
    Parker avatar
    6 posts
    Member since:
    Jun 2005

    Posted 29 Jul 2010 Link to this post

    I'm "dead in the water" until I can get this resolved. Does anyone have any ideas? 
  3. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Jul 2010 Link to this post

    Hi Parker,

    Can you somehow send also the skin along with any images you use in it? I'm asking for them because without a skin the sub menus stay the same width and don't change.

    Best wishes,
    Kamen Bundev
    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
  4. Parker
    Parker avatar
    6 posts
    Member since:
    Jun 2005

    Posted 30 Jul 2010 Link to this post

    No images.  Here is the skin file...


    /* RadMenu Black skin */

    .RadMenu_BC2010BLACK
    {
     background: #000000;
    }

    .RadMenu_BC2010BLACK_rtl
    {
     text-align: right;
    }

    .RadMenu_BC2010BLACK_Context
    {
     background: none;
     border: 0;
     width:900px;
    }

    .RadMenu_BC2010BLACK a
    {
     text-decoration: none;
    }

    .RadMenu_BC2010BLACK .rmLink
    {
     line-height: 30px;
     text-decoration: none;
     color: #ffffff;
     
     padding-left:3px;
    }

    .RadMenu_BC2010BLACK .rmLink:focused,
    .RadMenu_BC2010BLACK .rmFocused
    {
     outline: 0;
    }

    .RadMenu_BC2010BLACK .rmRootGroup .rmLink:hover,
    .RadMenu_BC2010BLACK .rmRootGroup .rmFocused,
    .RadMenu_BC2010BLACK .rmRootGroup .rmExpanded
    {
     
     color: #000000;
    }

    .RadMenu_BC2010BLACK .rmRootGroup .rmLink:hover .rmText,
    .RadMenu_BC2010BLACK .rmRootGroup .rmFocused .rmText,
    .RadMenu_BC2010BLACK .rmRootGroup .rmExpanded .rmText
    {
     color:#cab388;
    }

    .RadMenu_BC2010BLACK .rmGroup .rmLink:hover,
    .RadMenu_BC2010BLACK .rmGroup .rmFocused,
    .RadMenu_BC2010BLACK .rmGroup .rmExpanded,
    .RadMenu_BC2010BLACK .rmGroup .rmLink:hover .rmText,
    .RadMenu_BC2010BLACK .rmGroup .rmFocused .rmText,
    .RadMenu_BC2010BLACK .rmGroup .rmExpanded .rmText
    {
     color:white;
    }

    .RadMenu_BC2010BLACK .rmRootGroup .rmLink
    {
     margin-right: 5px;
     overflow: visible;
    }

    .RadMenu_BC2010BLACK .rmRootGroup .rmLink .rmText
    {
     font: normal 12px Arial, sans-serif;
     margin-right:-1px;
    }

    * html .RadMenu_BC2010BLACK .rmItem,* html .RadMenu_BC2010BLACK .rmHorizontal .rmLink,* html .RadMenu_BC2010BLACK .rmText{float:left}

    * html .RadMenu_BC2010BLACK .rmGroup .rmText,* html .RadMenu_BC2010BLACK .rmVertical .rmText{float:none}

    *+html .RadMenu_BC2010BLACK .rmRootGroup .rmLink .rmText
    {
     zoom: 1;
    }

    .RadMenu_BC2010BLACK .rmGroup .rmLink .rmText
    {
     font: normal 12px Arial, sans-serif;
    }

    .RadMenu_BC2010BLACK .rmGroup
    {
     background: #cab388;
     border: 1px solid #0b0b0b;
    }

    .RadMenu_BC2010BLACK .rmHorizontal
    {
     height: 30px;
     
    }

    .RadMenu_BC2010BLACK .rmGroup .rmHorizontal
    {
     height: 21px;
     
    }

    .RadMenu_BC2010BLACK .rmGroup .rmLink
    {
     text-decoration: none;
     color: #000000;
     line-height: 18px;
     height: 21px;
     margin: 0;
    }

    .RadMenu_BC2010BLACK_rtl .rmGroup .rmLink
    {
     text-align:center;
     padding-right:0;
    }

    .RadMenu_BC2010BLACK .rmText
    {
     padding:   10px 16px 5px 16px;
    }

    .RadMenu_BC2010BLACK .rmGroup .rmLink .rmText
    {
     padding: 3px  10px  3px 10px;
     font-size: 12px;
     margin-left: 0;
     margin-right: 0;
    }

    .RadMenu_BC2010BLACK_rtl .rmGroup .rmLink .rmText
    {
     padding: 3px 10px 3px  10px;
    }

    /* <expand arrows styling> */

    .RadMenu_BC2010BLACK .rmGroup .rmLink .rmExpandLeft
    {
     background: #191919 url(Menu/ArrowExpandRTL.gif) no-repeat left center;
    }

    .RadMenu_BC2010BLACK .rmGroup .rmLink .rmExpandRight
    {
     background: #191919 url(Menu/ArrowExpand.gif) no-repeat right center;
    }

    .RadMenu_BC2010BLACK .rmGroup .rmLink:hover .rmExpandLeft,
    .RadMenu_BC2010BLACK .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_BC2010BLACK .rmGroup .rmExpanded .rmExpandLeft
    {
     color: #ccc;
     background: #191919 url(Menu/ArrowExpandHoveredRTL.gif) no-repeat left center;
    }

    .RadMenu_BC2010BLACK .rmGroup .rmLink:hover .rmExpandRight,
    .RadMenu_BC2010BLACK .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_BC2010BLACK .rmGroup .rmExpanded .rmExpandRight
    {
     color: #ccc;
     background: #191919 url(Menu/ArrowExpandHovered.gif) no-repeat right center;
    }

    /* </expand arrows styling> */

    .RadMenu_BC2010BLACK .rmGroup .rmExpanded
    {
     z-index: 11;
    }

    .RadMenu_BC2010BLACK .rmTopArrowDisabled,
    .RadMenu_BC2010BLACK .rmBottomArrowDisabled,
    .RadMenu_BC2010BLACK .rmLeftArrowDisabled,
    .RadMenu_BC2010BLACK .rmRightArrowDisabled
    {
     display: none;
    }

    .RadMenu_BC2010BLACK .rmTopArrow,
    .RadMenu_BC2010BLACK .rmBottomArrow,
    .RadMenu_BC2010BLACK .rmLeftArrow,
    .RadMenu_BC2010BLACK .rmRightArrow
    {
     font-size: 0;
     line-height: 0;
     color: #fff;
    }

    .RadMenu_BC2010BLACK .rmTopArrow,
    .RadMenu_BC2010BLACK .rmBottomArrow
    {
     height: 10px;
     
     background: #343434 url(Menu/ArrowScrollUpDown.gif) no-repeat center top;
    }

    .RadMenu_BC2010BLACK .rmTopArrow
    {
     border-top: 1px solid #000;
    }

    .RadMenu_BC2010BLACK .rmBottomArrow
    {
     background-position: center bottom;
     border-bottom: 1px solid #000;
    }

    .RadMenu_BC2010BLACK .rmLeftArrow,
    .RadMenu_BC2010BLACK .rmRightArrow
    {
     width: 10px;
     height: 20px;
     margin: 0;
     background: #343434 url(Menu/ArrowScrollLeftRight.gif) no-repeat left center;
    }

    .RadMenu_BC2010BLACK .rmRightArrow
    {
     border-right: 1px solid #000;
     background-position: right center;
    }

    .RadMenu_BC2010BLACK .rmLeftArrow
    {
     border-left: 1px solid #000;
    }

    .RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled .rmText,
    .RadMenu_BC2010BLACK .rmGroup .rmItem .rmDisabled .rmText
    {
     color: #333;
    }

    .RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled
    {
     background: none;
    }

    .RadMenu_BC2010BLACK .rmGroup .rmItem .rmDisabled
    {
     background-color: #191919;
    }

    .RadMenu_BC2010BLACK .rmSeparator
    {
     background-color: #cab388;
    }

    .RadMenu_BC2010BLACK .rmHorizontal .rmSeparator
    {
     height: 20px;
     
     
     
    }

    .RadMenu_BC2010BLACK .rmVertical .rmSeparator
    {
     
    }

    .RadMenu_BC2010BLACK .rmLeftImage
    {
     margin: 2px 0;
    }

    .RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled:hover,
    .RadMenu_BC2010BLACK .rmRootGroup .rmItem .rmDisabled:hover .rmText
    {
     background: none;
    }

     

  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 Aug 2010 Link to this post

    Hi Parker,

    Unfortunately I still can't reproduce the issue you're having in all browsers I tested in (IE6-8, Firefox 3.6, Chrome 5). Can you tell me the exact version of RadControls for ASP.NET AJAX you're using? Also do you have any other stylesheets that you load on your pages?

    Regards,
    Kamen Bundev
    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
Back to Top