4 Replies Latest reply: Sep 6, 2013 11:04 AM by jeremy_hull RSS

    How to specify different horizontal restore & collapse icon for af|panelSplitter using Skinning based on Style class or position?

    Sujay Patil

      Hello,

       

      I am trying to provide different horizontal restore & collapse icon for af|panelSplitter using Skinning based on Style class or position. I have 2 af:panelSplitter with orientation="horizontal" - One with positionedFromEnd="true" one with positionedFromEnd="false". I want to specify the horizontal collapse and restore icon using Skinning. I want specify different icons based on positionedFromEnd. When I specify icons they are appearing for both splitters. I gave 2 different styleClass to these splitter but it is not taking them in account,

      JSPX Page -

      <af:panelSplitter orientation="horizontal" splitterPosition="196" positionedFromEnd="false" id="pnlSplitterLeft" collapsed="false" styleClass="panelSplitterLeftClass">
        <f:facet name="first">
        <!-- Content of First Facets -->
        </f:facet>
        <f:facet name="second">
        <af:panelSplitter orientation="horizontal" splitterPosition="196" positionedFromEnd="true" id="pnlSplitterRight" collapsed="false" styleClass="panelSplitterRighClass">
        <f:facet name="first">
        <!-- Content of First Facets -->
        </f:facet>
        <f:facet name="second">
        <!-- Content of First Facets -->
        </f:facet>
        </af:panelSplitter>
        </f:facet>
      </af:panelSplitter>
      

      CSS Skinn

      af|panelSplitter::horizontal-restore-icon {
          width: 10px;
          height: 55px ;
          content : url("/skins/AppSkin/Left_Open.gif");
      }
      af|panelSplitter::horizontal-collapse-icon {
          width: 10px;
          height: 55px ;
          content : url("/skins/AppSkin/Left_Close.gif");
      }
      af|panelSplitter.panelSplitterLeftClass::horizontal-restore-icon {
          width: 10px;
          height: 55px ;
          content : url("/skins/AppSkin/Left_Open.gif");
      }
      af|panelSplitter.panelSplitterLeftClass::horizontal-collapse-icon {
          width: 10px;
          height: 55px ;
          content : url("/skins/AppSkin/Left_Close.gif");
      }
      af|panelSplitter.panelSplitterRighClass::horizontal-restore-icon {
          width: 10px;
          height: 55px ;
          content : url("/skins/AppSkin/Right_Open.gif");
      }
      af|panelSplitter.panelSplitterRighClass::horizontal-collapse-icon {
          width: 10px;
          height: 55px ;
          content : url("/skins/AppSkin/Right_Close.gif");
      }
      
      

       

      It is always showing Left_Open.gif and Left_Close.gif for both splitters. But I want different image.

      How to specify different horizontal restore & collapse icon for af|panelSplitter using Skinning based on Style class or position?

       

      - Sujay