Telerik Forums / UI for ASP.NET AJAX Forum / Menu /

Horizontal Submenu Width and Height Grows

Telerik UI for ASP.NET AJAX
Resources Buy Try

5 posts, 0 answers

Parker

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>

submenuenlargeincrease.jpg

submenuenlarge.jpg

submenucorrect.jpg
Parker

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?
Kamen Bundev
Admin

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
Parker

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;
}
Kamen Bundev
Admin

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

Horizontal Submenu Width and Height Grows

Parker

Parker

Kamen Bundev

Parker

Kamen Bundev