aspose file tools*
The moose likes JSF and the fly likes Remove spacing before the label for menu item Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Java » JSF
Bookmark "Remove spacing before the label for menu item" Watch "Remove spacing before the label for menu item" New topic
Author

Remove spacing before the label for menu item

Zaferullah Khan
Greenhorn

Joined: Mar 10, 2007
Posts: 17
Hello,
I am using richfaces dropDownMenu component which contains a set of rich menuItems. When the menu items are displayed, a extra space is displayed before the lablel for each of the menu item. But I have a requirement of not displaying the space before the labels.

Please find attached the image illustrating the issue.



Thanks,
Zafar



[Thumbnail for menu-image.jpg]

Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16145
    
  21

It is probably not really a "space". Check the RichFaces specs and see which CSS style manages that part of the display. You may want to set your own style in its place.


Customer surveys are for companies who didn't pay proper attention to begin with.
Andy Crane
Greenhorn

Joined: Dec 30, 2008
Posts: 17
I'd check it with Firefox & Firebug.

Based on the image you attached, if I was to code the front end for that, it would be this:

- unordered list
- 0 padding & margin on the left (on the ul itself)
- the background image is applied to the ul
- the list items (li) here have a left margin of around 2px to 4px
- the list items here have a left padding of around 40px to 50px <-- this is what you're looking for imho

I'd definitely start with firefox and firebug though. Open firebug, click inspect and hover over the menu. I normally click in the general area that I am working with in the source display of firebug, then just click through the source to check the CSS. In the source display, when you click on an HTML element, all of the CSS for that element displays on the right. Even the CSS that lost the battle to the cascading feature.

Now, in case you cannot edit that source directly, what you need to do is override that style with a style that follows it in the cascade.

For example, assuming the following: (today is the first I read of JSF...)
- these are default styles applied by JSF
- you have your own attached stylesheet that is included lower in the source than the default stylesheet for the JSF pieces

if the style displayed in firebug is: .myMenuList ul li{ padding-left: 50px; }, then you would add another style in your own stylesheet, or in the head section of your JSP/F page that reads like this: .myMenuList ul li{ padding-left: 5px; } (or whatever value you want to end up with)

I'd suggest adding it to the head section of your page while you're still working on overriding it, then moving it to your attached stylesheet. And in the event nothing works, like nothing at all, and you know for a FACT that you have the correct styles and updated values, then change the modified style to look like this: .myMenuList ul li{ padding-left: 5px !important; }

The !important will force this particular definition to override EVERYTHING that it competes with. While this sounds kewl, it can, and normally does lead to issues later in the day if it's used too much. By later in the day, I am being literal, as in be careful with it . Most sites should not have even one.

- Andy C
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 16145
    
  21

Welcome to the JavaRanch, Andy!

Your discourse was quite instructive, but it's a bit of overkill here, since JSF works at a more abstract level. What you're describing is how it works "under the hood", but most JSF styles are semantic affixes, not syntactic ones, so it's important to not only understand CSS, but also how the JSF item in question employs CSS.

RichFaces is "skinnable", so they have some definitions that permit customization of the appearance at a fairly high level. And the latest documentation comes with pretty pictures and line and arrows to help out, which is why I suggested the RTFM approach.

I have a project right now I've actually tried to brute-force override the RichFaces L&F because what I want is almost, but not quite, within its current restrictions. So far, little success. They made the rules and they've made it hard not to play by them.
Andy Crane
Greenhorn

Joined: Dec 30, 2008
Posts: 17
Hey Tim,

Thanks for the info!

I'm doing the front end for a java shop, but we've not worked with JSF here. Anyway, thanks again for that. I hope to lurk and answer front end questions when I can and hopefully learn more about java as time goes on. This way maybe I can be useful AND learn

- andy c
Zaferullah Khan
Greenhorn

Joined: Mar 10, 2007
Posts: 17
I could solve this issue by adding the following style.



This empty space is for placing icons and if no icon is specified, richfaces replaces it will a spacer gif image. Setting the width of this spacer image to 0px removes the unwanted empty space.

Thanks,
Zafar
 
Don't get me started about those stupid light bulbs.
 
subject: Remove spacing before the label for menu item