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

Horizontal Submenu Width and Height Grows

4 Answers 57 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Parker
Top achievements
Rank 1
Parker asked on 26 Jul 2010, 08:37 PM
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>

4 Answers, 1 is accepted

Sort by
0
Parker
Top achievements
Rank 1
answered on 29 Jul 2010, 04:00 PM
I'm "dead in the water" until I can get this resolved. Does anyone have any ideas? 
0
Kamen Bundev
Telerik team
answered on 30 Jul 2010, 09:06 AM
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
0
Parker
Top achievements
Rank 1
answered on 30 Jul 2010, 08:26 PM
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;
}

 

0
Kamen Bundev
Telerik team
answered on 02 Aug 2010, 08:23 AM
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
Tags
Menu
Asked by
Parker
Top achievements
Rank 1
Answers by
Parker
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or