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

[sandy4you]

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:

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.

.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

[michpetrov]

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?

[sandy4you]

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

[michpetrov]

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?

[sandy4you]

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

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

Hope this helps you.

Thanks & Regards,

Sandy

[michpetrov]

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

[sandy4you]

common.css

[michpetrov]

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

[sandy4you]

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