6 Replies Latest reply on Dec 15, 2009 12:59 PM by dandausch

    Issue with style Classes and toolBar

    dandausch

      I am using RichFaces 3.3.2 and I am experiencing issues around formatting components on the rich:toolBar. I have defined my own .rich-toolbar-item style that seems to work for only certain toolbar items. The style manages output text on the toolbar, both size and color, but impacts the 2 command links and the 1 outputLink only from a size persective even when the styleClass is explicit. The color for these links, I believe, is picked up from the skin. Is there an order of precedence when the style classes are applied? It is confusing, for sure. Any thoughts? Here is my code below:

       

       

      <style>

       

      .rich-tool-tip{

       

      background-color: #eef2f8;

       

      border-color: #7196c8;

       

      font-size: 8pt;

       

      text-decoration: none;

      }

       

      .rich-toolbar-item{

       

      font-family: Arial,Verdana,sans-serif;

       

      font-size: 12px;

       

      font-weight:bold;

       

      color: black;

      }

       

      </style>

       

       

       

      <h:form>

       

       

      <rich:toolBar itemSeparator="line">

       

       

      <rich:toolBarGroup location="left">

       

      <h:outputText value="Welcome #{AcrViewController.employee.firstName} #{AcrViewController.employee.lastName}"

       

       

      rendered="#{empty AcrViewController.whoLoggedInAs}"/>

       

      <h:outputText value="Welcome #{AcrViewController.whoLoggedInAs.firstName} #{AcrViewController.whoLoggedInAs.lastName} (logged in as #{AcrViewController.employee.firstName} #{AcrViewController.employee.lastName})"

       

       

      rendered="#{!empty AcrViewController.whoLoggedInAs}"/>

       

      </rich:toolBarGroup>

       

      <rich:toolBarGroup itemSeparator="line" location="right" >

       

      <h:commandLink id="tasksLink" value="Tasks" styleClass="rich-toolbar-item">

       

      <rich:toolTip direction="bottom-left" for="tasksLink">

      This link will pop up a window

      <br/>

      and show any current tasks.

       

      </rich:toolTip>

       

      </h:commandLink>

       

      <h:outputLink id="helpLink"

       

       

      value="http://xxxxxxxxx/component/getcontent?objectId=09016fea80629f93&current=true"

       

       

      target="_blank" styleClass="rich-toolbar-item">

       

      <h:outputText value="Help"/>

       

      <rich:toolTip direction="bottom-left" for="helpLink">

      This link will provide the

      <br/>

      current ALM HELP document.

       

      </rich:toolTip>

       

      </h:outputLink>

       

      <h:commandLink id="logoutLink"

       

       

      action="#{AcrViewController.logout}" value="Logout" styleClass="rich-toolbar-item">

       

      <rich:toolTip direction="bottom-left" for="logoutLink">

      This link will logout you out of ALM

      <br/>

      and close the browser.

       

      </rich:toolTip>

       

      </h:commandLink>

       

       

       

      </rich:toolBarGroup>

       

       

      </rich:toolBar>

       

      </h:form>

        • 1. Re: Issue
          ilya_shaikovsky

          I'm seeing black links using your code at rf-demo environment(3.3.3 snapshot) and seems it's expected result.

           

          I suggest you to use Firebug to check classes applied. Please check it and let me know if you will find out that some RF classes overrides your ones

          • 2. Re: Issue
            dandausch
            Thanks Ilya for your reply. Yes, I verified that in Firefox, the links are indeed black and it appears that the class 'rich-tool-tip is being applied correctly (at least, according to firebug). Not sure what to do now however. IE is our standard browser so all my testing/verification is done with that browser.
            • 3. Re: Issue
              ilya_shaikovsky
              See the same in IE :/
              1 of 1 people found this helpful
              • 4. Re: Issue
                dandausch
                Perhaps it is less well-behaving depending on IE version. Unfortunately, we have little control over our desktop environment and we are currently at IE version 6.0.2900. What version did you use?
                • 5. Re: Issue
                  ilya_shaikovsky

                  I checked only in IE8 and 7

                   

                  under IE6 reproduces

                   

                  seems the rule from IE embeded stylesheet overrides it. changing class to:

                   

                       color: black !important;
                  made it works for me
                  • 6. Re: Issue
                    dandausch
                    Thanks for the effort Ilya! I added the !important and it worked for me in IE 6. I did not know of such a rule so I learned something new today. Thanks agagain!