Link to home
Start Free TrialLog in
Avatar of Dovberman
DovbermanFlag for United States of America

asked on

How to limit the width of an asp.net menu

My menu stretches across the entire page.

How can I set the width properties. ?

See images:

User generated image
User generated image
Thanks,
Avatar of Dovberman
Dovberman
Flag of United States of America image

ASKER

This is the current code:

            <asp:Menu ID="Menu2" runat="server"
                        Width="100px"
            Orientation ="Horizontal"
            CssClass ="MYMenuClass"
            BackColor= "Aqua"
            RenderingMode="Table"
            DynamicMenuItemStyle-ItemSpacing="2px"
            DynamicMenuStyle-BackColor="White"
            DynamicHorizontalOffset="8"
            DynamicMenuItemStyle-BackColor="Yellow"
            DynamicMenuItemStyle-VerticalPadding="1px"
            DynamicMenuStyle-BorderStyle="Solid"
            DynamicMenuStyle-HorizontalPadding="1px"
            DynamicMenuStyle-VerticalPadding="1px"
            DynamicSelectedStyle-BackColor="Lime"
            DynamicVerticalOffset="1"  
            IncludeStyleBlock="False"
            MaximumDynamicDisplayLevels="3"
            DisappearAfter="-1"
            Height="16px"
            StaticMenuItemStyle-ItemSpacing="8px"
            Font-Bold="True"  
            Font-Size="14pt"
            ForeColor="Black"
            StaticMenuItemStyle-BorderStyle  ="Solid"
            StaticMenuItemStyle-BorderWidth ="1px" Font-Names="Calibri"
            StaticMenuItemStyle-HorizontalPadding="8px"
            StaticHoverStyle-BackColor ="White"
            DynamicHoverStyle-BackColor ="White"
            StaticHorizontalOffset="1" StaticMenuStyle-Width="10%" StaticMenuItemStyle-Width="12px">

 
                       <Items>
                            <asp:MenuItem NavigateUrl="#" Text="Basics" Value="mnuBasics">
                                <asp:MenuItem
                                    NavigateUrl="Default.aspx" Text="Home" Value="mnuHome" >
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ContactUs.aspx" Text="Contact Us" Value="mnuContactUs">
                                </asp:MenuItem>

                            </asp:MenuItem>
Avatar of Lokesh B R
Hi,

Its working fine.

can you post the full code.
Capture.PNG
It worked when I created the menu in a simple web page.

The same code did not work in a site.master page.

<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <style type="text/css">
        .auto-style1 {
            width: 600px;
        }
    </style>

    <style type="text/css">
        .MYMenuClass {
            color: Green;
            background-color: #00FFFF;
        }

            .MYMenuClass ul {
                background: #00FFFF;
                border: 1px solid #648ABD;
            }

                .MYMenuClass ul li {
                    background: #00FFFF none no-repeat;
                    text-align: center; /* set width if needed.*/
                    width: 200px;
                    border: 1px solid #648ABD;
                }

                    .MYMenuClass ul li a {
                        color: black;
                        padding: 4px 2px 4px;
                        padding-left: 8px !important;
                        border: 1px solid #648ABD;
                        border-bottom: 0;
                    }

                        .MYMenuClass ul li a:hover {
                            background-image: none;
                        }

                        .MYMenuClass ul li a:hover {
                            color: White;
                        }
    </style>

    </head>

       </asp:ScriptManager>
   
            <asp:Menu ID="Menu2" runat="server"
             Orientation ="Horizontal"
            CssClass ="MYMenuClass"
            BackColor= "Aqua"
            RenderingMode="Table"
            DynamicMenuItemStyle-ItemSpacing="2px"
            DynamicMenuStyle-BackColor="White"
            DynamicHorizontalOffset="8"
            DynamicMenuItemStyle-BackColor="Yellow"
            DynamicMenuItemStyle-VerticalPadding="1px"
            DynamicMenuStyle-BorderStyle="Solid"
            DynamicMenuStyle-HorizontalPadding="1px"
            DynamicMenuStyle-VerticalPadding="1px"
            DynamicSelectedStyle-BackColor="Lime"
            DynamicVerticalOffset="1"  
            IncludeStyleBlock="False"
            MaximumDynamicDisplayLevels="2"
            DisappearAfter="-1"
            Height="16px" Width="100px"
            StaticMenuItemStyle-ItemSpacing="8px"
            Font-Bold="True"  
            Font-Size="14pt"
            ForeColor="Black"
            StaticMenuItemStyle-BorderStyle  ="Solid"
            StaticMenuItemStyle-BorderWidth ="1px" Font-Names="Calibri"
            StaticMenuItemStyle-HorizontalPadding="8px"
            StaticHoverStyle-BackColor ="White"
            DynamicHoverStyle-BackColor ="White" >
                       
           
<DynamicHoverStyle BackColor="White"></DynamicHoverStyle>

<DynamicMenuItemStyle ItemSpacing="2px" VerticalPadding="1px" BackColor="Yellow"></DynamicMenuItemStyle>

<DynamicMenuStyle HorizontalPadding="1px" VerticalPadding="1px" BackColor="White" BorderStyle="Solid"></DynamicMenuStyle>

<DynamicSelectedStyle BackColor="Lime"></DynamicSelectedStyle>
                       
           
                       <Items>
                            <asp:MenuItem NavigateUrl="#" Text="Basics" Value="mnuBasics">
                                <asp:MenuItem
                                    NavigateUrl="Default.aspx" Text="Home" Value="mnuHome" >
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ContactUs.aspx" Text="Contact Us" Value="mnuContactUs">
                                </asp:MenuItem>

                            </asp:MenuItem>
                   
                            <asp:MenuItem NavigateUrl="#" Text="Features" Value="mnuFeatures">
                                <asp:MenuItem
                                    NavigateUrl="BestPicks.aspx" Text="Best Picks(Registered Users)" Value="mnuBestPicks">
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="FinanceTermsDefn.aspx" Text="Finance Terms" Value="mnuFinanceTerms">
                                </asp:MenuItem>
                             </asp:MenuItem>
               
                           <asp:MenuItem NavigateUrl="#" Text="Registration" Value="mnuRegistration">
                   
                                <asp:MenuItem
                                    NavigateUrl="RenewSubscription.aspx" Text="Renew Subscription" Value="mnuRenew">
                                </asp:MenuItem>

                                <asp:MenuItem
                                    NavigateUrl="RegisterFree.aspx" Text="Free Trial" Value="mnuFreeTrial">
                                </asp:MenuItem>
                   
                                <asp:MenuItem
                                    NavigateUrl="ReplacePassword.aspx" Text="Replace Password" Value="mnuReplacePassword">
                                </asp:MenuItem>

                                <asp:MenuItem
                                    NavigateUrl="ChangePassword.aspx" Text="Change Password" Value="mnuChangePassword">
                                </asp:MenuItem>
                            </asp:MenuItem>
               
                            <asp:MenuItem NavigateUrl="#" Text="Site Usage Help" Value="mnuSiteHelp">
                                <asp:MenuItem
                                    NavigateUrl="ChangePasswordInstructions.aspx" Text="Password Change Help" Value="mnuChangePasswordHelp">
                                </asp:MenuItem>
                            </asp:MenuItem>

                    <asp:MenuItem NavigateUrl="#" Text="Admin Only" Value="mnuAdminOnly">
                        <asp:MenuItem
                        NavigateUrl="Admin/AdminMenu.aspx" Text="Admin Menu" Value="mnuAdminMenu">
                        </asp:MenuItem>

 
              </asp:MenuItem>
 
             </Items>

            <StaticHoverStyle BackColor="White"></StaticHoverStyle>

            <StaticMenuItemStyle HorizontalPadding="8px" ItemSpacing="8px" BorderWidth="1px" BorderStyle="Solid" Width="12px"></StaticMenuItemStyle>

            <StaticMenuStyle HorizontalPadding="1px" VerticalPadding="1px" Height="12px" Width="5px" BackColor="Aqua" BorderColor="Black" BorderStyle="Solid" BorderWidth="3px" CssClass="MYMenuClass"></StaticMenuStyle>
      </asp:Menu>
     
-----
Rendering is different.
ASKER CERTIFIED SOLUTION
Avatar of Lokesh B R
Lokesh B R
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I will investigate further.  Perhaps another variable on my master page is interfering.

Will give you feedback in 4 hours.  I have a dental appointment.

Thanks,

Dovberman
I found the code in site.master that was interfering.  I simply commented out the line.
Everything works now.

Thanks,

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs"
    Inherits="StockPickerMax.SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %>- My ASP.NET Application</title>

  <%-- Find out if this is really needed. Prevents proper rendering of the menu.
    <webopt:BundleReference runat="server" Path="~/Content/css" />
  --%>

    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />

   
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <style type="text/css">
        .auto-style1 {
            width: 600px;
        }
    </style>

    <style type="text/css">
        .MYMenuClass {
            color: Green;
            background-color: #00FFFF;
        }
Excellent and timely support.

Thanks,