How to pad an image and text in the asp:Menu control - asp.net

I have an asp:Menu control that has four different menu items in it. Each menu item has a graphic and a text description.
<Items>
<asp:MenuItem Text="New Authorization Form" Value="default.aspx" NavigateUrl="~/Default.aspx" ImageUrl="~/Images/TextPad.png"></asp:MenuItem>
<asp:MenuItem Text="Manage My Forms" Value="myrequests.aspx" NavigateUrl="~/MyRequests.aspx" ImageUrl="~/Images/Pencil.png"></asp:MenuItem>
</Items>
My problem is the icon and text have no padding between them and it just looks ugly! Does anyone know how I can force a bit of padding between the image and text of the menu item? I've looked at all of the attributes on the asp:Menu control, but I haven't been able to find one for this, but I may have just missed it.

I came up with an answer, but it's not what I was hoping for exactly. I added a style for img tags to my css like so:
img
{
padding-right: 5px;
}
I'm still a little bummed that there are no attributes within the asp:Menu control that allow you to specify the padding between the image and menu item text.

you could try creating a skin and then you could add a css class to and style it any way you want

the image item in the Menu is controlled by the class icon, modifying the properties of this class should solve the problem. I set padding-right to 5px to space image and text

Related

Primefaces p:printer loses all custom css

I have a dialog with some text in rows and columns, im using css to remove the borders of the panel/rows in the dialog box. however when I use with the target set as my dialog box it displaces everything in the dialog box but with all the borders showing and none of my custom css.
Is there a way of telling the printer to use the custom css or stop it going back to the default?
I still can't figure out why the printer is ignoring the CSS but I have found a work around.
By adding border:none; to each row and column in my dialog it works
<p:row styleClass=".ui-panelgrid" border= "0" style="border: none;">
<p:column colspan="3" border= "0" style="border: none;">
hope this is useful for someone in the future, but if anyone would care to explain why the was ignoring the custom CSS in the first place I would love to know. thanks

Asp:CheckBox checkbox and text are not on the same line

I can't seem to figure out how to get the checkbox and associated text to appear on one line. The text is very short so it doesn't seem to be a width issue.
I tried setting display:inline on the control but when it's rendered, a span is added around the input and label and that has the display:inline.
If I manually add the display:inline, using the resources view in Chrome, to the resulting label than it's fine. The problem is I don't know how to get the control to do this.
Thanks.
You want to have display:inline applied to the <label> element that ASP generates to hold the label text, not the control itself. So, for example:
<style type="text/css">
label { display: inline-block; }
</style>
<asp:CheckBox Text="This text appears on same line as checkbox" runat="server" />

Styling form in jQuery-Dialog

On my jQuery - Dialog I have a form with multiple form fields. There I have a link to add "Attributes". Now I want to have this on the left side of the dialog and on the same line like the submit button. The div "somediv" must be an inline-element.
How can I achieve that?
jsFiddle - http://jsfiddle.net/Auzx6/
(Please expand the "Result" frame a lot.)
Thank you very much!
Adding a <br clear="all" /> before the div actions (<div class="actions">) should make the trick.
The clear="all" will clean all the previous floats.
Then if you want it on the left side just add this css rule "text-align: left" on that div.

Show arrow on non selectable nodes

I have a databound ASP.net menu with the following databindings
<DataBindings>
<asp:MenuItemBinding TextField="title" ToolTipField="description" NavigateUrlField="url" SelectableField="AsLink" />
</DataBindings>
Now any node which becomes non selectable also loses its arrow, even if it has children
Why is that and how can we remedy this?
I have seen some suggestions to use StaticEnableDefaultPopOutImage.
Neither should it, as its purpose is according to msdn
Gets or sets a value indicating whether the built-in image is displayed to indicate that a static menu item has a submenu
And my issue is equally with static and dynamic nodes, in case of non-selectability
I'm using .NET 4.0
The problem is that the Menu control adds a style on the static menu item anchor(<a>) element (style="cursor: text") when it is not selectable so you need to manully change it.
Change the Css for your Static Menu Style to make it easy to find the right anchor elements:
<StaticMenuStyle CssClass="StaticMenuHover" />
Add a Jquery script to the end of the page to change the pointer for the menu items:
//Grab all Static Menu anchors elements with an href of '#'(Non active links)
$(".StaticMenuHover a[href='#']").css("cursor","pointer");

ASP.Net Vertical Menu with Scroll functionality

Referring to Menu / Scrolling Example
I would like to create / find the same functionality for a vertical menu. I tried the following.
<asp:Menu ID="menuAccountMembers" runat="server" StaticSubMenuIndent="16px"
Visible="true" RenderingMode="Table"
ScrollDownImageUrl="~/Resources/scrolldown.jpg"
ScrollUpImageUrl="~/Resources/scrollup.jpg">
<Items>
But it doesnt display any scrolling images. I am using .net 4.0
Tried setting menuAccountMembers.RenderingCompatibility = new Version(3, 5); as well.
If there a property to only display the first 5 root menu items, then show scroll bars for the rest? It can be click-able, no need to hover over to show next item.
Found the Jcarousel sufficient

Resources