-
1. Re: rich:dropDownMenu -- label appears BELOW icon
sachem1414 Apr 8, 2009 11:27 AM (in response to 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>
-
2. Re: rich:dropDownMenu -- label appears BELOW icon
ilya_shaikovsky Apr 9, 2009 7:15 AM (in response to sachem1414)please check the styles applied using firebug.
-
3. Re: rich:dropDownMenu -- label appears BELOW icon
sachem1414 Apr 9, 2009 10:23 AM (in response to 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 -
4. Re: rich:dropDownMenu -- label appears BELOW icon
ilya_shaikovsky Apr 9, 2009 10:29 AM (in response to sachem1414)check please not computed style but just user-agent CSS.. you will be able to see all the classes applied to the element.
-
5. Re: rich:dropDownMenu -- label appears BELOW icon
sachem1414 Apr 9, 2009 11:28 AM (in response to 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;
} -
6. Re: rich:dropDownMenu -- label appears BELOW icon
ilya_shaikovsky Apr 10, 2009 4:11 AM (in response to sachem1414)still can't reproduce.. :( maybe you able to create small sample and share the war?
-
7. Re: rich:dropDownMenu -- label appears BELOW icon
sachem1414 Apr 10, 2009 11:49 AM (in response to sachem1414)It might take me a little while, but I'll see if I can get a sample together.
-
8. Re: rich:dropDownMenu -- label appears BELOW icon
sachem1414 Apr 16, 2009 11:12 AM (in response to 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.
-
9. Re: rich:dropDownMenu -- label appears BELOW icon
sachem1414 Apr 29, 2009 10:41 AM (in response to 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.