Search code examples
jsfrichfacesmyfaces

Move the open/close marker of rich:simpleTogglePanel

I have a simpleTogglePanel set up as follows:

<rich:simpleTogglePanel
    headerClass="myHeaderClass"
    opened="false"
    switchType="client" style="border: 0px;" bodyClass="myBodyClass">
    <f:facet name="header">
        <h:outputText styleClass="panelHeader" value="#{myBean.header}"></h:outputText>
    </f:facet>
    <f:facet name="closeMarker">
        <h:outputText value="^"/>
    </f:facet>
    <f:facet name="openMarker">
        <h:outputText value=">" />
    </f:facet>
    Content
</rich:simpleTogglePanel>

I want to move the open/close marker(which I have made ^ and > respectively to the left of the panel.

I have tried using float: left in myHeaderClass aswell as float:left !important and float:left;text-align: right.

Nowhere can I find anything that explains how to do this.The styling I found on sites where people were showing functionality of the simpleTogglePanel overall and this seemed to be all I didn't have.

I am using JSF 1.2(Apache MyFaces Implementation) and Richfaces 3.3.

Solution

  • CSS which govern the markers in rich:simpleTogglePanel is rich-stglpnl-marker as per RichFaces reference guide (scroll down for Classes names that define a component appearance section)

    rich-stglpnl-marker     Defines styles for a wrapper <div> element of a marker

    Whereas headerClass is applicable for header elements only.

    headerClass    applicable to header elements