2 Replies Latest reply on Jun 17, 2010 9:18 AM by Charles Yang

    dropDownMenu or menuItem style question

    Charles Yang Newbie



      The default dropDownMenu will show list of rich:menuItem with a vertical blue bar on the left, takes lot of space. Is there any way to get rid off that

      vertical bar on the left ? I checked attributes, seems none. How can I over write that CSS somewhere being used by the dropDownMenu or menuItem ?



        • 1. Re: dropDownMenu or menuItem style question
          Akaine Harga Novice

          Option #1: read the RichFaces referece, is has a brief info on element styles. Though there is not much info there.


          Option #2 (personal favorite):

          - render the page as it is

          - select the part with the menubar with cursor

          - from browser context menu select View Selection Source (Firefox), or whatever your browser offers

          - look for the part with the menus produced html source

          - now you can see the real html structure produced, and so you can define some style to the "not generated" elements and run through the DOM to get to the part you actually need to change





          <div class="myclass"><some_ugly_complex_rf_element/></div>


          rendered html:

          <div class="myclass">





          .myclass table div table tr td div span {some_css_properties;}


          Feel the power over this mess!



          Btw, dropDownMenu and menuItem have plenty of their own attributes which allow relatively profound styling so I am not really sure you would need all these brute techniques

          • 2. Re: dropDownMenu or menuItem style question
            Charles Yang Newbie

            Thanks lot, I'll try what you suggested.