8 Replies Latest reply on Jul 30, 2013 11:59 PM by Sandeep Singh

    Issue with .rf-ds-btn css / Button Display Issue.

    Sandeep Singh Newbie

      Hi All,

       

      Currently I m facing issue with the .rf-ds-btn css being displayed.

       

      I have an overview page where the button is being used with style class  rf-ds-btn.

      The look is as below:

      CSS_Fine.JPG

      Here it works perfectly fine and the

       

      .rf-ds-btn {

          background-color: #6685C2;

          background-image: url("/bo/rfRes/dsBtnGrad.png.faces?v=4.0.0.Final&db=eAFjZJBjZDBiZBBh!P!p-3!G!2mthxiYADggBv8_&ln=org.richfaces.images");

          background-position: left top;

          background-repeat: repeat-x;

          border-color: #C0C0C0;

          border-style: solid;

          border-width: 1px;

          color: #000000;

          cursor: pointer;

          display: inline-block;

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

          font-size: 11px;

          font-weight: normal;

          padding: 2px 10px 3px;

          text-decoration: none;

      }

       

      But when the similar kind of button is used on the create/edit page the css is getting overridden and the background-image is different.

      CSS_Not_Fine.JPG

       

      .rf-ds-btn {

          background-color: #D4CFC7;

          background-position: left top;

          background-repeat: repeat-x;

          border: 1px solid #C4C0C9;

          color: #000000;

          cursor: pointer;

          display: inline-block;

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

          font-size: 11px;

          font-weight: normal;

          padding: 2px 10px 3px;

          text-decoration: none;

      }

      .rf-ds-btn {

          background-image: url("/bo/javax.faces.resource/btnGrad.png.faces?ln=images");

      }

       

      Looks like the problem is with the  background-image.

       

      Using firebug if I replace the  background-image url to url("/bo/rfRes/dsBtnGrad.png.faces?v=4.0.0.Final&db=eAFjZJBjZDBiZBBh!P!p-3!G!2mthxiYADggBv8_&ln=org.richfaces.images") then this button also become blue in color and things are fine.

       

      Need help to understand why its getting overridden and how to fix it in a proper and optimal way.

       

      Thanks & Regards,

      Sandy

       

       

        • 1. Re: Issue with .rf-ds-btn css / Button Display Issue.
          Michal Petrov Master

          Hi,

           

          what version of RichFaces do you use? And can you show me how you render these elements?

           

          Also, doesn't the firebug point you to the file where the bad background is defined?

          • 2. Re: Issue with .rf-ds-btn css / Button Display Issue.
            Sandeep Singh Newbie

            Hi Michal,

             

            The Richfaces version is v=4.0.0.Final as mentioned in the url.

             

            For the overview page the style class is working fine. Please see the code snippet below:

            <ui:composition template="/templates/boLayout.xhtml">

                    <ui:define name="content">

                        <h:form id="form_bu">

                           

                            <comp:overviewBtnGroup

                                id="btnGrp"

                                createLabel="#{commonTrans.businessUnitOverviewCreateNewBtn}"

                                createAction="#{businessUnitCrudWflBean.startNew(businessUnitOverviewBean.propertyManager)}"

                                resetFilterAction="#{businessUnitOverviewBean.dataModel.resetFilterValues}"

                                doSearchAction="#{businessUnitOverviewBean.dataModel.applyFilterValues}" />

                           

                            <hr />

                           

                            <rich:extendedDataTable

                                id="businessUnitList"

                                ------

                                ------

                            </rich:extendedDataTable>

                       

                        </h:form>

                          </ui:define>

            </ui:composition>

             

            For the create/edit scenario its not working fine. Please see the code snippet below:

            <ui:composition template="/templates/boLayout.xhtml">

                          <ui:define name="content">

                        <h:form id="businessUnitForm">

                            <comp:createBtnGroup

                                resetAction="#{businessUnitCrudWflBean.reset}"

                                createAction="#{businessUnitCrudWflBean.create}"

                                cancelAction="#{businessUnitCrudWflBean.cancel}" />

                               

                            <div class="dataFormContainer clearfix">

                                <h3>

                                    <h:outputText value="#{commonTrans.businessUnitDetailsHeadline}" />

                                </h3>

                                <ui:include src="businessUnitForm.xhtml">

                                    <ui:param name="disabled" value="false"/>

                                </ui:include>

                            </div>

                        </h:form>

                          </ui:define>

            </ui:composition>

             

            The only difference is the <div class="dataFormContainer clearfix">.

            Looks like its overridding the .rf-ds-btn css.

             

            Need help where to fix this issue.

             

            Hope this help you in understanding the problem and analying it in a better way.

             

            Thanks & Regards,

            Sandy

            • 3. Re: Issue with .rf-ds-btn css / Button Display Issue.
              Michal Petrov Master

              I would need to see the datascroller and the outputted HTML of the buttons. It looks like there is an error in the RichFaces CSS but I haven't found it.

               

              EDIT:

              The only difference is the <div class="dataFormContainer clearfix">.

              Looks like its overridding the .rf-ds-btn css.

              And does it change if you delete it?

              • 4. Re: Issue with .rf-ds-btn css / Button Display Issue.
                Sandeep Singh Newbie

                Hi Michal,

                 

                Please see the outputted HTML of the buttons along with the CSS for both the scenario.

                Working fine i.e. the Overview page where I have a rich-data-scoller

                working_fine.JPG

                 

                Not working fine i.e. the Create/Edit page where there is no rich-data-scoller

                not_working_fine.JPG

                 

                Hope this helps you.

                 

                Thanks & Regards,

                Sandy

                • 5. Re: Issue with .rf-ds-btn css / Button Display Issue.
                  Michal Petrov Master

                  Okay, so the second button is getting the background from a different file. What's the full name of the file?

                  • 7. Re: Issue with .rf-ds-btn css / Button Display Issue.
                    Michal Petrov Master

                    Common.css is the correct file, the "bad" file in the second picture starts with "busine".

                    • 8. Re: Issue with .rf-ds-btn css / Button Display Issue.
                      Sandeep Singh Newbie

                      Hi Michal,

                       

                      First of all thanks a lot for having the discussion on this issue.

                      Its not the problem with the given page or common.css file.

                      The button css is coming from the styleClass "rf-ds-btn" which comes from the RichFaces 'dataScroller'.

                       

                      Hence, any page which does not have a dataTable will have this issue.

                      I fixed this issue by explicitly importing the dataScroller css in the head for the component which is creating the buttons in the Create/Edit scenario.

                       

                      <composite:implementation>

                                          <!--

                                                    The styleClass "rf-ds-btn" comes from the RichFaces 'dataScroller'.

                                                    So any page which does not have a data-table it will not get the CSS for the button.

                                                    Hence we need to explicitly import the 'datascroller.ecss'.

                                                    DON'T DELETE THIS.

                                          -->

                                          <h:outputStylesheet library="org.richfaces" name="datascroller.ecss" />

                       

                      Thanks & Regards,

                      Sandy