Hi @ all,
Is it possible to show the item-related text under the image in a horizontal webmenu?
like the Webmenu MSN explorer sample in the Samples_Page.
in the sample the text is already in the image. Is there a property or css possibility to get this layout?
Thx for your answers :)
If I understood correctly, you want to size the btn image and the btn text, so both the btn and text to be visible and clickable. I have created a simple code sample based on your code illustrating this. I see no issues when clicking on the text.
This is the code:
<head runat="server"> <title></title> <style> .DMIStyle { width: 36px; text-align: center; line-break: auto; } </style> <script> function WebDataMenu1_Click() { window.alert("BtnClicked"); }; </script></head><body> <form id="form1" runat="server">
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager> <ig:WebDataMenu ID="WebDataMenu1" runat="server" Height="54px" Width="100%"> <GroupSettings Orientation="Horizontal" Height="150px" Width="100%" /> <ClientEvents ItemClick="WebDataMenu1_Click" /> <ItemSettings CssClass="WDMItemStyle" /> <Items> <ig:DataMenuItem Key="btnSearch" ToolTip="Search Now" TemplateId="ItemTemplate1"> </ig:DataMenuItem> <ig:DataMenuItem Key="btnSearch" ToolTip="Search Now" TemplateId="ItemTemplate1"> </ig:DataMenuItem> <ig:DataMenuItem Key="btnSearch" ToolTip="Search Now" TemplateId="ItemTemplate1"> </ig:DataMenuItem> </Items> <Templates> <ig:ItemTemplate runat="server" ID="ItemTemplate1" TemplateID="ItemTemplate1"> <Template> <div id="Div1" runat="server"> <table> <tr> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="/search.jpg" Width="30" Height="30" OnClientClick="WebDataMenu1_Click()" /> <br /> <asp:Label ID="Label1" runat="server" Text="Search"></asp:Label> </tr> </table> </div> </Template> </ig:ItemTemplate> </Templates> </ig:WebDataMenu> <div> </div> </form></body>
Refer to the CodeAttachment for details.
Please let me know if this behavior you are observing is browser related and how this approach works for you.
With my method above, is there a way to make the image take up the whole button? Right now, you can click on the button to the side of the image and the click event is not fired.
Hello Gregory,
Thank you for your feedback and for sharing this with us. We believe that the other community members could benefit from such threads.Please feel free to let me know if a question about our tool set comes up on your mind.
I figured it out! I can do it with a template like this:
<igtbar:WebDataMenu ID="WebDataMenu1" runat="server" EnableAppStyling="True" StyleSetName="Office2007Blue" Height="54px" OnItemClick="WebDataMenu1_ButtonClicked" Width="100%"> <GroupSettings Orientation="Horizontal" Height="54px" Width="100%" /> <ClientEvents ItemClick="WebDataMenu1_Click" /> <ItemSettings CssClass="WDMItemStyle" /> <Items> <igtbar:DataMenuItem Key="btnSearch" ToolTip="Search Now" TemplateId="ItemTemplate1"> </igtbar:DataMenuItem> </Items> <Templates> <ig:ItemTemplate runat="server" ID="ItemTemplate1" TemplateID="ItemTemplate1"> <Template> <div runat="server"> <table> <tr> <asp:ImageButton runat="server" ImageUrl="./Images/search.png" /> <br /> <asp:Label runat="server" Text="Search"></asp:Label> </tr> </table> </div> </Template> </ig:ItemTemplate> </Templates> </igtbar:WebDataMenu>
I hope this saves someone many hours I spent strugling with this issue.
Hi,
I am trying to accomplish the same thing I believe. Is there a way to put my text under my image in a horizontal WebDataMenu?
Here is my menu:
<igtbar:WebDataMenu ID="WebDataMenu1" runat="server" EnableAppStyling="True" StyleSetName="Office2007Blue" Height="55px" Font-Size="X-Small" BorderStyle="None" OnItemClicked="WebDataMenu1_ButtonClicked" Width="100%"> <GroupSettings Orientation="Horizontal" Height="55px" /> <clientevents ItemClick="WebDataMenu1_Click" /> <Items> <igtbar:DataMenuItem ImageUrl="./Images/search.png" Key="btnSearch" ToolTip="Search Now" Text="Search" CssClass="DMIStyle"> </igtbar:DataMenuItem> <igtbar:DataMenuItem IsSeparator="true" /> <igtbar:DataMenuItem ImageUrl="./Images/unSelect.png" Key="btnClearAll" ToolTip="Clear all values" Text="Clear" CssClass="DMIStyle"> </igtbar:DataMenuItem> <igtbar:DataMenuItem IsSeparator="true" /> <igtbar:DataMenuItem ImageUrl="./Images/save.png" Key="btnSaveQuery" ToolTip="Save search" Text="Save" CssClass="DMIStyle"> </igtbar:DataMenuItem> <igtbar:DataMenuItem IsSeparator="true" /> <igtbar:DataMenuItem ImageUrl="./Images/expertMode.png" Key="btnAdvanceSearch" ToolTip="Edit in advance search mode" Text="Expert" CssClass="DMIStyle"> </igtbar:DataMenuItem> </Items> </igtbar:WebDataMenu>
And my CSS:
.DMIStyle{ width: 36px; text-align: center; line-break: auto;}