I made a Menu in asp.net with different levels. And out of curiousity I would like to know how to set the width for the MenuItems Test1 and Test2.
My code:
<asp:Menu ID="Menu1" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" Font-Names="Verdana" >
<Items>
<asp:MenuItem Text="Test" Selectable="false">
<asp:MenuItem NavigateUrl="~/Test1.aspx" Text="Test1" Value="Test1"/>
<asp:MenuItem NavigateUrl="~/Test2.aspx" Text="Test2" Value="Test2"/>
</asp:MenuItem>
</Items>
</asp:Menu>
I searched the net, tried some things but couldn't figure it out. Any simple but working ideas for this issue?
Thanks in advance.
<style>
.level1
{
width:500px;
}
</style>
<asp:menu ID="Menu1" runat="server">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1"/>
</LevelMenuItemStyles>
<Items>
<asp:MenuItem Text="First"></asp:MenuItem>
<asp:MenuItem Text="second"></asp:MenuItem>
</Items>
</asp:menu>
Alternative
protected void Menu1_MenuItemDataBound(object sender, TreeNodeEventArgs e)
{
e.Item.Text = "<div style='width:100px; color:Yellow; background-color:Orange' >" + e.Item.Text + "</div>";
}
Related
I tried to set set the "User" menu item to left align, but could not find the correct method. Below is my code snippet
<asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"
<asp:MenuItem Text="User" ToolTip="User">
<asp:MenuItem Text="Profile" ToolTip="Profile" />
<asp:MenuItem Text="Settings" ToolTip="Settings" />
<asp:MenuItem Text="Sign Out" ToolTip="Sign Out" />
</asp:MenuItem>
</Items>`
</asp:Menu>
you can replicate my problem with this small code snippet.
<div ID="topcell" runat="server" align="center" style="text-align:center">
<asp:Menu ID="testmenu" runat="server" Width="300px" Orientation="Horizontal" RenderingMode="List">
<Items>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
<asp:MenuItem Text="Testing"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
Result:
Testing-Testing-Testing-Testing-Testing-Testing
Testing----------------------------------------
Desired results:
Testing-Testing-Testing-Testing-Testing-Testing
------------------Testing----------------------
I have tried all three RenderingModes with no luck! Am I doing something wrong?
Try adding following CSS to your page:
<style type="text/css" >
#testmenu ul li {
display:inline-block;
float:none !important;
}
</style>
It will overwrite inline menu styles and force the unordered list to center.
I am trying to set the backcolor on the asp.net menu's selected item but it has no effect.
<div id="navepanel" style="float:left;">
<asp:Menu ID="Menu1" runat="server">
<StaticSelectedStyle BackColor="#D5D9F7" />
<DynamicSelectedStyle BackColor="#D5D9F7" />
<Items>
<asp:MenuItem Text="New Chapter" Value="New Chapter" NavigateUrl="~/ChapterManagement/CreateNewChapter.aspx"></asp:MenuItem>
<asp:MenuItem Text="Edit Chapter" Value="Edit Chapter" NavigateUrl ="~/ChapterManagement/EditChapter.aspx"></asp:MenuItem>
<asp:MenuItem Text="Select Chapter" Value="Select Chapter" NavigateUrl ="~/ChapterManagement/SelectChapter.aspx"></asp:MenuItem>
<asp:MenuItem Text="Add Topics" Value="Add Topics" NavigateUrl ="~/ChapterManagement/AddTopics.aspx"></asp:MenuItem>
</Items>
</asp:Menu>
I am using Chrome currently for the testing purpose. This menu control is on the master page.
Try this:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" StaticDisplayLevels="1"
Orientation="Horizontal" DataSourceID="SiteMapDataSource1" >
<staticselectedstyle backcolor="LightBlue" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
I have a menu with a submenu.
The following is the code for the menu on the site master
<div id="menu">
<h2>
Dashboard</h2>
<asp:Menu ID="NavigationMenu" dir="rtl" runat="server" CssClass="menu" EnableViewState="false"
Orientation="Vertical">
<Items>
<asp:MenuItem NavigateUrl="~/Vi.aspx" Text="View "/>
<asp:MenuItem NavigateUrl="~/I.aspx" Text="Import"/>
<asp:MenuItem NavigateUrl="~/S.aspx" Text="Insert "/>
<asp:MenuItem NavigateUrl="~/R.aspx" Text="Reports"/>
<asp:MenuItem NavigateUrl="~/Re.aspx" Text="Re" />
<asp:MenuItem Text="Maintenance">
<asp:MenuItem NavigateUrl="~/F.aspx" Text="For" />
<asp:MenuItem NavigateUrl="~/P.aspx" Text="Prod" />
<asp:MenuItem NavigateUrl="~/T.aspx" Text="T" />
<asp:MenuItem NavigateUrl="~/U.aspx" Text="U" />
<asp:MenuItem NavigateUrl="~/C.aspx" Text="C" />
</asp:MenuItem> </Items>
</asp:Menu>
</div>
The problem is that when i open the submenu it is overlapping the gridview on the page and it not a matter of z-index the background seems to be transparent but i dont want it transparent
There are some issues with Z Index not being handled as planned always when working with master pages.. Where messing around with a similar problem a while back and this forum post helped me: http://forums.asp.net/t/1038006.aspx
Here is my ASP.NET Master Page:
The problem is, that when I set the margin to zero, my page overflows and I get a scrollbar at the bottom of the page. Any ideas?
The reason I am setting the margin to zero is because I want the content to fill the page completely, so that my ASP:Menu spans the whole page.
<body style="padding:0; margin:0;">
<div>
<form id="frmMaster" runat="server">
<asp:ScriptManager runat="server" ID="scriptManagerID" EnablePageMethods="true" ScriptMode="Release"></asp:ScriptManager>
<div id="header">
<div id="headerTop">
<div id="headerLeft">
<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/Company_Logo.jpg" Height="80px" AlternateText="Logo" />
</div>
<div id="headerRight">
<asp:Menu ID="mnuMain" runat="server" OnMenuItemClick="mnuMain_MenuItemClick" Orientation="Horizontal"
StaticDisplayLevels="1" MaximumDynamicDisplayLevels="3" SkinID="UserBar" >
<Items>
<asp:MenuItem Text="About" Value="About;list"></asp:MenuItem>
<asp:MenuItem Text="Config" Selectable="false">
<asp:MenuItem Text="Change Password" Value="ChangePassword;edit"></asp:MenuItem>
<asp:MenuItem Text="Customer Ranks" Value="ConfigCustomersRank;list"></asp:MenuItem>
<asp:MenuItem Text="Registration" Value="RegistrationInfo;list"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Logout" Value="Logon;logout"></asp:MenuItem>
</Items>
</asp:Menu>
<asp:Label ID="lblMasterError" runat="server" ForeColor="Red" Text="Error" Visible="False"></asp:Label>
<asp:Label ID="lblUser" runat="server" ForeColor="Black" Text="User: " ></asp:Label>
</div>
</div>
</div>
<div id="menu" class="clear hideSkipLink">
<asp:Menu ID="mnuModule" runat="server" OnMenuItemClick="mnuModule_MenuItemClick"
Orientation="Horizontal" SkinID="Navigation" >
<Items>
<asp:MenuItem Text="Home" Value="Home;list"></asp:MenuItem>
<asp:MenuItem Text="Calendar" Value="Calendar;month"></asp:MenuItem>
<asp:MenuItem Text="Customers" Value="Customers;list">
<asp:MenuItem Text="Create Customer" Value="Customers;create;0;;0;"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Communications" Selectable="false">
<asp:MenuItem Text="Activities" Value="Activities;list">
<asp:MenuItem Text="Create Activity" Value="Activities;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Emails" Value="Emails;list">
<asp:MenuItem Text="Create Email" Value="Emails;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Meetings" Value="Meetings;list">
<asp:MenuItem Text="Create Meeting" Value="Meetings;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Phone Communication" Value="PhoneComms;list">
<asp:MenuItem Text="Schedule Phone" Value="PhoneComms;create"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Transactions" Selectable="false">
<asp:MenuItem Text="Invoices" Value="Invoices;list"></asp:MenuItem>
<asp:MenuItem Text="Leads" Value="Leads;list">
<asp:MenuItem Text="Create Lead" Value="Leads;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Opportunities" Value="Opportunities;list">
<asp:MenuItem Text="Create Opportunity" Value="Opportunities;create"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Quotes" Value="Quotes;list">
<asp:MenuItem Text="Create Quote" Value="Quotes;create"></asp:MenuItem>
</asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Reports" Selectable="false">
<asp:MenuItem Text="Contracts For Renewal" Value="CTRTContractsForRenewal;list"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
<asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>
</form>
</div>
The problem was that in the Content page (not master), there was the following code:
<asp:Panel ID="pnlHeader" runat="server" SkinID="None" CssClass="Panel_Page_Header" >
<asp:Label ID="lblHome" runat="server" Text="Home" SkinID="None" CssClass="Label_Page_Header" ></asp:Label>
</asp:Panel>
And the Label_Page_Header class had the following properties
padding: 5px;
width: 100%;
With the padding, the width:100% was stretching the label out over the edge of the page.