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:

Thanks,

ASP.NETHTML

Last Comment

Dovberman

8/22/2022 - Mon

Dovberman

4/16/2015

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>

Lokesh B R

4/16/2015

Hi,

Its working fine.

can you post the full code.
Capture.PNG

Dovberman

4/16/2015

ASKER

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.

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

rwheeler23

ASKER CERTIFIED SOLUTION

Lokesh B R

4/16/2015

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Dovberman

4/16/2015

ASKER

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

Dovberman

4/16/2015

ASKER

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;
}

Dovberman

4/16/2015

ASKER

Excellent and timely support.

Thanks,

⚡ FREE TRIAL OFFER

Try out a week of full access for free.

Find out why thousands trust the EE community with their toughest problems.