rich:dropDownMenu -- label appears BELOW icon

[sachem1414]

I'm using:
RichFaces 3.3.0.GA
Spring Web Flow 2.0.6.RELEASE (w/ Spring Faces)
Facelets 1.1.14
Firefox 3.0.8

Here's what I'm trying to do:
I have a dataTable with a list of "incidents". At the top, I want a toolBar with various menu items. I created a drop-down menu to select/unselect all items in the list. However, the menu labels always appear below the icon...making the menu items very thick (and, IMO, very ugly).

[img]http://i41.tinypic.com/qnp5w5.jpg[/img]
Notice that all the labels are below the icons. Even the menu items with no icons specified have the default "spacer" icon above the labels.

Here's my code:

<rich:toolBar>
 <rich:dropDownMenu>
 <f:facet name="label">
 <h:panelGroup>
 <h:graphicImage height="20px" value="/img/checkbox.png" />
 <h:outputText value="Mark"/>
 </h:panelGroup>
 </f:facet>
 <rich:menuGroup value="Select...">
 <rich:menuItem value="All" submitMode="ajax"
 action="#{incidents.selectAll}"
 reRender="incidentList"
 icon="/img/checkbox.png" />
 </rich:menuGroup>
 <rich:menuGroup value="Unselect...">
 <rich:menuItem value="All" submitMode="ajax"
 action="unselectAll" reRender="incidentList" />
 </rich:menuGroup>
 </rich:dropDownMenu>
</rich:toolBar>

I have no styles applied. I verified this in Firebug and the only styles (direct and inherited) are from dr/richfaces.

I've followed the code from the RichFaces demo very closely. So, I'm totally confused by what's showing up!

Could it be Spring Web Flow causing trouble? I might post on their forum as well. Has anyone ever seen this problem with or without SWF? Any ideas?

Thanks in advance for your help.

[sachem1414]

If this is useful to anyone, here is some of the generated HTML.
This is the section that displays the Mark-->Select-->All menu item.

It's basically just a with two tags inside, one for the icon and one for the label.

<div style="" onmouseup="Event.stop(event); " onmouseover="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('j_id212:j_id217:j_id225').style.cssText='; ; ;'; $('j_id212:j_id217:j_id225:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('j_id212:j_id217:j_id225:anchor'), 'rich-menu-item-label-selected');" onmouseout="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('j_id212:j_id217:j_id225').style.cssText=';'; $('j_id212:j_id217:j_id225:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('j_id212:j_id217:j_id225:anchor'), 'rich-menu-item-label-selected');" onmousedown="Event.stop(event); " onclick="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('_viewRoot','j_id212:j_id217',event,{'similarityGroupingId':'j_id212:j_id217:j_id225','parameters':{'j_id212:j_id217:j_id225':'j_id212:j_id217:j_id225'} ,'actionUrl':'/my-app/manageIncidents.html?execution=e28s1'} );" id="j_id212:j_id217:j_id225" class="dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled">
 <span id="j_id212:j_id217:j_id225:icon" class="dr-menu-icon rich-menu-item-icon">
 <img height="16" width="16" src="/my-app/img/checkbox.png" alt=""/>
 </span>
 <span id="j_id212:j_id217:j_id225:anchor" class="rich-menu-item-label">All</span>
</div>

[ilya_shaikovsky]

please check the styles applied using firebug.

[sachem1414]

As I stated earlier, I don't think I'm applying any styles to these elements (i.e. styles that I've applied to any higher level parents are not being inherited at this level). So, all of the styles here are default or set by Richfaces.

From Firebug, the computed style of the div generated for the Mark-->Select-->All menu item:

Text
font-family Arial,Verdana,sans-serif
font-size 11px
font-weight bold
font-style normal
color #000000
text-transform none
text-decoration none
letter-spacing normal
word-spacing normal
line-height 14px
text-align left
vertical-align baseline
direction ltr

Background
background-color transparent
background-image none
background-repeat repeat
background-position 0 0
background-attachment scroll
opacity 1

Box Model
width auto
height auto
top 0
right 0
bottom 0
left 0
margin-top 0
margin-right 0
margin-bottom 0
margin-left 0
padding-top 2px
padding-right 36px
padding-bottom 2px
padding-left 2px
border-top-width 0
border-right-width 0
border-bottom-width 0
border-left-width 0
border-top-color transparent
border-right-color transparent
border-bottom-color transparent
border-left-color transparent
border-top-style solid
border-right-style solid
border-bottom-style solid
border-left-style solid

Layout
position relative
display block
visibility visible
z-index auto
overflow-x visible
overflow-y visible
white-space nowrap
clip auto
float none
clear none
-moz-box-sizing content-box

Other
cursor pointer
list-style-image none
list-style-position outside
list-style-type disc
marker-offset auto

[ilya_shaikovsky]

check please not computed style but just user-agent CSS.. you will be able to see all the classes applied to the element.

[sachem1414]

I apologize if this is difficult to read. I was only able to copy unformatted text from Firebug. I tried to add some color, etc.

To keep this brief, I removed all styles/classes that were crossed out in Firebug. If those might be useful, I could try to post all of it....but it would be very long.



.dr-menu-item, .dr-menu-item a, .dr-menu-item a:hover, .dr-menu-item a:visited {eAFrvajd...AEgwDtA__ (line 1)
color:#000000;
font-family:Arial,Verdana,sans-serif;
font-size:11px;
}

.dr-menu-item-enabled {eAFrvajd...AEgwDtA__ (line 1)
border:0 solid transparent;
padding:2px 36px 2px 2px;
}

.dr-menu-item {eAFrvajd...AEgwDtA__ (line 1)
position:relative;
white-space:nowrap;
}

div {style.css (line 16)
text-align:left;
}

* {style.css (line 1)
margin:0;
}

html, div, map, dt, isindex, form {html.css (line 56)
display:block;
}

Inherited from table#j_id219:j_id224:j_id226.dr-toolbar-ext
table {style.css (line 39)
border-spacing:0;
}

table {html.css (line 165)
border-collapse:separate;
text-indent:0;
}

Inherited from div#j_id209.dr-stglpnl
.dr-stglpnl {eAFrvajd...AEgwDtA__ (line 1)
border-style:solid;
}

[ilya_shaikovsky]

still can't reproduce.. :( maybe you able to create small sample and share the war?

[sachem1414]

It might take me a little while, but I'll see if I can get a sample together.

[sachem1414]

Sorry, it's taking so long. But a sample war is in the works and I'll share it as soon as it's ready.

[sachem1414]

Sorry, I never replied here. I was completely unable to recreate this in a sample war.

So, it must be some inherited style or something in my actual application that's causing this. Unfortunately, I can't share the whole thing. If I ever figure this out, I'll come back and post here.

For now, I'm ignoring this problem. I've hacked around it by using a panelGrid as my icon with no label.

<rich:menuItem>
 <f:facet name="icon">
 <h:panelGrid columns="3">
 <rich:spacer width="16" />
 <rich:spacer width="10" />
 <h:outputText value="All" />
 </h:panelGrid>
 </f:facet>
</rich:menuItem>

If I want an "icon", I replace the first spacer with an image. Admittedly, this is kind of silly, but it's good enough for us for now and I've moved on.