PDA

View Full Version : [CLOSED] Remove Blank Icon Column from Menu



Patrick_G
Oct 28, 2013, 7:08 PM
Having the same issue as this post

http://forums.ext.net/showthread.php?11661-CLOSED-Removing-Icon-Space-in-Menu

but can't figure out the css to get this done. I have ShowSeparator="false" but no matter what css I try there always seems to be 30px added to the left property of one of the Divs.

Thank you for your help.

Baidaly
Oct 28, 2013, 8:55 PM
Hello!

Try the following approach:


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

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

<!DOCTYPE html>

<html>
<head runat="server">
<style>
.my-class .x-menu-item-link {
padding-left: 5px;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button ID="Button1" runat="server" Text="Menu">
<Menu>
<ext:Menu ID="Menu1" runat="server" Cls="my-class" ShowSeparator="false">
<Items>
<ext:MenuItem Text="Item 1" />
<ext:MenuItem Text="Item 2" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</form>
</body>
</html>

Patrick_G
Oct 29, 2013, 11:39 AM
Thank you Baidaly for the very quick response. Your suggestion got me going in the right direction and I now have what I need.

One thing I didn't mention in my post was that I was wanting to put a custom panel inside the menu. With your help, I got the following to work.



<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<style>
.x-menu-body {
padding: 1px;
}
.x-menu-item-indent {
margin-left: 0px;
}

</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Button ID="Button1" runat="server" Text="Menu">
<Menu>
<ext:Menu ID="Menu1" runat="server" ShowSeparator="false">
<Items>
<ext:Panel runat="server" Title="" Width="200" BodyPadding="5" Border="false">
<Items>
<ext:FieldSet runat="server" Title="Info" Layout="AnchorLayout" DefaultAnchor="100%">
<Items>
<ext:Container runat="server" Layout="VBoxLayout">
<Items>
<ext:Label Text="AAA"></ext:Label>
<ext:Label Text="BBB"></ext:Label>
</Items>
</ext:Container>
</Items>
</ext:FieldSet>
<ext:FieldSet runat="server" Title="Info" Layout="AnchorLayout" DefaultAnchor="100%">
<Items>
<ext:Container runat="server" Layout="VBoxLayout">
<Items>
<ext:Label Text="CCC"></ext:Label>
<ext:Label Text="DDD"></ext:Label>
</Items>
</ext:Container>
</Items>
</ext:FieldSet>
</Items>
</ext:Panel>
</Items>
</ext:Menu>
</Menu>
</ext:Button>
</form>
</body>
</html>

Baidaly
Oct 29, 2013, 5:14 PM
Thank you for sharing the final solution!