PDA

View Full Version : [CLOSED] Menu Item Href clickable area



cwolcott
Feb 12, 2015, 12:51 AM
Why do you have to be over the text for the Href to work on a MenuItem? Mouse over the Menu Items -> Short, but click on the far right.
To make it work in ASP I calculated the number of "&nbsp" to the end of the MenuItem text. Is there a better way in Ext.Net or CSS?



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Horizontal Menu - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.horizontal-menu .x-menu-item-link {
line-height: 20px;
}

.horizontal-menu .x-menu-item-arrow
{
display:none;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Menu
runat="server"
Floating="false"
Layout="HBoxLayout"
ShowSeparator="false"
Cls="horizontal-menu">
<Defaults>
<ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
</Defaults>
<Items>
<ext:MenuItem runat="server" Text="Menu Items" Icon="BulletBlue">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem Text="Short" Href="http://ext.net/" />
<ext:MenuItem Text="Super Long Menu Item" Href="http://ext.net/" />
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</ext:Menu>
</body>
</html>

cwolcott
Feb 12, 2015, 1:01 AM
Go ahead and close the thread. I think I answered by own question.
I added a cls to the subMenu and defined display: block;



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Horizontal Menu - Ext.NET Examples</title>

<link href="/resources/css/examples.css" rel="stylesheet" />

<style>
.horizontal-menu .x-menu-item-link {
line-height: 20px;
}

.horizontal-menu .x-menu-item-arrow {
display: none;
}

.wsSubMenu .x-menu-item-link {
padding-left: 5px;
line-height: 16px;
font-weight: bold;
display: block;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Menu
runat="server"
Floating="false"
Layout="HBoxLayout"
ShowSeparator="false"
Cls="horizontal-menu">
<Defaults>
<ext:Parameter Name="MenuAlign" Value="tl-bl?" Mode="Value" />
</Defaults>
<Items>
<ext:MenuItem runat="server" Text="Menu Items" Icon="BulletBlue">
<Menu>
<ext:Menu runat="server" Cls="wsSubMenu">
<Items>
<ext:MenuItem Text="Short" Href="http://ext.net/" />
<ext:MenuItem Text="Super Long Menu Item" Href="http://ext.net/" />
</Items>
</ext:Menu>
</Menu>
</ext:MenuItem>
</Items>
</ext:Menu>
</body>
</html>