Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Rad menu is overlapping

2 Answers 98 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Madhuri
Top achievements
Rank 1
Madhuri asked on 05 Mar 2012, 06:11 AM
Using-Rad-menu.JPG
My-Previous-menu.JPG
<link href="../_UpgradeReport_Files/Menu.Default.css" rel="Stylesheet" type="text/css" />
 <link href="../_UpgradeReport_Files/Menustyle.css" rel="Stylesheet"  type="text/css" />
 <style type="text/css">
 .CustomItem
   {
        
     background:#FFA07A;
   
     text-decoration:none;
   }
   .CustomItem:hover
   {
        
      background:#FFA07A;
      text-decoration:none;
      
   }
     .style1
     {
         height: 114px;
     }
 </style>
 <style type="text/css">
    .WrappingItem1
    {
     background-color:#ffffff;
     color:#ffffff  !important;
     width:1px;
     height:1px;
     }
.WrappingItem
        {
            background-color:#4682B4;
            color: #ffffff;
            text-align:left;
            /*margin:0px;*/
            /*padding-right :100px;
            padding-left:150px;
              /* white-space: normal;*/
       }
       
        .WrappingItem:hover
        {
        border:#811D06;
        color:#000000  !important;
        background-color:#EFCDA9 !important;--%>
        }
        .WrappingItem.horizontal .separator
        {
       width:0px;
        height:0px;
        }
       .RedItem
        {
           background-color: #FF9900 !important;
            color: #ffffff;
        }
         .RedItem:hover
        {
            background-color: #FF9900 !important;
            color: #ffffff;
        }
</style>
  
  
  
<telerik:RadMenu ID="radMenuHMO" runat="server" Width="100%" Height="25px" CssClass="RadMenu_Green" Skin="Outlook" Flow="Horizontal">
          <Items>
           
                  <telerik:RadMenuItem  Text="Master" AccessKey="M"  ExpandedCssClass="RadMenu_Green">
                    <Items>
                        <telerik:RadMenuItem Text="Currency Master"  NavigateUrl="~/CMS/CurrencyMaster.aspx"  CssClass="WrappingItem1" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                         <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                       
                  </Items>
                </telerik:RadMenuItem>
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                 
                <telerik:RadMenuItem  Text="Insurance" AccessKey="I" Width="6%" ExpandedCssClass="RadMenu_Green">
                    <Items>
                        <telerik:RadMenuItem Text="ICD Codes" NavigateUrl="~/CMS/ICDCodesMaster.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                      
                        <telerik:RadMenuItem   Text="Relation" NavigateUrl="~/CMS/RelationMaster.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                        </Items>
                     </telerik:RadMenuItem>
                      <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                  <%-- ************************ Hospital Menu*************************--%>
                      <telerik:RadMenuItem  Text="Benefit Provider" AccessKey="B" Width="9%" style="text-align:center" ExpandedCssClass="RadMenu_Green">
                        <Items>
                            <telerik:RadMenuItem  Text="Hospital Master" NavigateUrl="~/CMS/HospitalMaster.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                                 <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />                  
                            <telerik:RadMenuItem Text="Hospital Contract" NavigateUrl="~/CMS/HospitalContractsMaster.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff">  </telerik:RadMenuItem>
                       </Items>
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                      <%-- ************************ Policy Menu*************************--%>
                <telerik:RadMenuItem  Text="Policy Admin" AccessKey="P" width="8%" style="text-align:center" ExpandedCssClass="RadMenu_Green" >
                    <Items>
                        <telerik:RadMenuItem Text="Group Master" NavigateUrl="~/CMS/GroupDetailsMaster.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        
                       </Items>
                    </telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                     
                    <telerik:RadMenuItem  AccessKey="A" Text="Approval" Width="5.5%" style="text-align:center" ExpandedCssClass="RadMenu_Green" >
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Approval Request" NavigateUrl="~/CMS/ApprovalRequestMaster.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                        <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                         <telerik:RadMenuItem  runat="server" Text="Approval Status Report" NavigateUrl="~/Reports/ApprovalRequestStatus.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                   </Items>
                </telerik:RadMenuItem>
                  <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                 
                 <telerik:RadMenuItem  AccessKey="U" Text="Customer              Service"  Width="9.5%" style="text-align:center" ExpandedCssClass="RadMenu_Green">
                    <Items>    
                            <telerik:RadMenuItem runat="server" Text="Member System Info" NavigateUrl="~/CMS/MemberSystemInfoApproval.aspx"  CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                 
                <telerik:RadMenuItem  AccessKey="C" Text="Claims" Width="5%" style="text-align:left" ExpandedCssClass="RadMenu_Green">
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Claim Batch" NavigateUrl="~/CMS/ClaimsBatch.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"></telerik:RadMenuItem>
                     <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        <telerik:RadMenuItem runat="server" Text="Claims Status Report" NavigateUrl="~/Reports/ClaimsStatusReport.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff">  </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>  
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                 <%-- ************************ Rate Module *************************--%>
                 <telerik:RadMenuItem  AccessKey="U" Text="Rate Module" Width="6.5%"  style="text-align:center" ExpandedCssClass="RadMenu_Green">
                    <Items>    
                            <telerik:RadMenuItem runat="server" Text="Tarrif Module" NavigateUrl="~/CMS/QuotationsReport.aspx"  CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                             <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                             <telerik:RadMenuItem runat="server" Text="Rating Report" NavigateUrl="~/Reports/Rating.aspx"  CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                  </Items>
                </telerik:RadMenuItem>
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                 <%-- ************************ Application *************************--%>
                 <telerik:RadMenuItem  AccessKey="U" Text="Application" Width="6%" style="text-align:center" ExpandedCssClass="RadMenu_Green">
                    <Items>    
                            <telerik:RadMenuItem runat="server" Text="Application Form Details" NavigateUrl="~/CMS/ApplicationFormDetails.aspx"  CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                             <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                             <telerik:RadMenuItem runat="server" Text="Application Decision" NavigateUrl="~/CMS/ApplicationStatus.aspx"  CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff"> </telerik:RadMenuItem>
                  </Items>
                </telerik:RadMenuItem> 
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                  
                       <telerik:RadMenuItem runat="server" AccessKey="R" Text="ReInsurance" Width="6%" style="text-align:center" ExpandedCssClass="RadMenu_Green" >
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="ReInsurance Master" NavigateUrl="~/RCMS/ReInsuranceMaster.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff" >
                        </telerik:RadMenuItem> <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        
                    </Items>
                </telerik:RadMenuItem>
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                 
                   <telerik:RadMenuItem runat="server" AccessKey="R" Text="Reports" Width="5%" style="text-align:center" ExpandedCssClass="RadMenu_Green" >
                    <Items>
                        <telerik:RadMenuItem runat="server" Text="Computation of Premium" NavigateUrl="~/Reports/PremiumComputation.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff" >
                        </telerik:RadMenuItem> <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        
                    </Items>
                </telerik:RadMenuItem>
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                 
                  <telerik:RadMenuItem runat="server" AccessKey="T" Text="SAMA Reports" Width="6%" style="text-align:center" ExpandedCssClass="RadMenu_Green" >
                    <Items> 
                     <telerik:RadMenuItem runat="server" Text="Policy Data Report" NavigateUrl="~/Reports/PolicyData.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff">
                        </telerik:RadMenuItem> <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        
                    </Items>
                </telerik:RadMenuItem> 
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                  <%-- ************************ CCHI Reports Menu*************************--%> 
                <telerik:RadMenuItem runat="server" AccessKey="C" Text="Compliance Reports" Width="7%" style="text-align:center" ExpandedCssClass="RadMenu_Green" >
                   <Items> 
                     <telerik:RadMenuItem runat="server" Text="CCHI Members Upload Report" NavigateUrl="~/Reports/CCHIMembersUpload.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff">
                        </telerik:RadMenuItem>
                         <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        <telerik:RadMenuItem runat="server" Text="CCHI Policy Report" NavigateUrl="~/Reports/CCHIReport.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff">
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        <telerik:RadMenuItem runat="server" Text="CCHI Beneficary Report" NavigateUrl="~/Reports/NewCCHIBeneficaryReport.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff">
                        </telerik:RadMenuItem>
                   </Items>
                </telerik:RadMenuItem>
                 <telerik:RadMenuItem runat="server" IsSeparator="True" Text="|" />
                  <%-- ************************ Downloads Menu*************************--%> 
                <telerik:RadMenuItem runat="server" AccessKey="D" Text="Downloads" Width="5%" style="text-align:center" ExpandedCssClass="RadMenu_Green" >
                    <Items> 
                     <telerik:RadMenuItem runat="server" Text="Import Templates" NavigateUrl="~/CMS/DataImportTemplates.aspx" CssClass="WrappingItem" BackColor="#4682B4"  ForeColor="#ffffff">
                        </telerik:RadMenuItem> 
                        <telerik:RadMenuItem runat="server" CssClass="WrappingItem1" IsSeparator="True" />
                        
                    </Items>
                  </telerik:RadMenuItem>
                </Items>
             </telerik:RadMenu>

Hello EveryBody,
            
                        in my Project i used Rad menu control. i have so many menus. when I put all menus if the name is Lengthy it is overlapping with the next one . can you Please help me how to solve this problem.


thanks in advance.

2 Answers, 1 is accepted

Sort by
0
Peter
Telerik team
answered on 07 Mar 2012, 02:33 PM
Hello Madhuri,

This problem occurs because the width of the menu items is set in percents. Please, try removing these settings and let RadMenu auto adjust the width of its items.

All the best,
Peter
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Shinu
Top achievements
Rank 2
answered on 07 Mar 2012, 02:39 PM
Hello Madhuri,

Try adding the following CSS rule in the CSS class RadMenu_Green
CSS:
.RadMenu_Green
        {. . . . . .
            white-space: normal !important;
         . . . . . .
        }

Thanks,
Shinu.
Tags
Menu
Asked by
Madhuri
Top achievements
Rank 1
Answers by
Peter
Telerik team
Shinu
Top achievements
Rank 2
Share this question
or