9 Replies Latest reply on Apr 29, 2009 10:41 AM by Randy Attai

    rich:dropDownMenu -- label appears BELOW icon

    Randy Attai Newbie

      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.

        • 1. Re: rich:dropDownMenu -- label appears BELOW icon
          Randy Attai Newbie

          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 Master

            please check the styles applied using firebug.

            • 3. Re: rich:dropDownMenu -- label appears BELOW icon
              Randy Attai Newbie

              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 Master

                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
                  Randy Attai Newbie

                  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 Master

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

                    • 7. Re: rich:dropDownMenu -- label appears BELOW icon
                      Randy Attai Newbie

                      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
                        Randy Attai Newbie

                        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
                          Randy Attai Newbie

                          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.