Rad menu is overlapping

3 posts, 0 answers
  1. Madhuri
    Madhuri avatar
    11 posts
    Member since:
    Feb 2012

    Posted 05 Mar 2012 Link to this post

    <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. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 07 Mar 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Mar 2012 Link to this post

    Hello Madhuri,

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

    Thanks,
    Shinu.
Back to Top