This discussion is archived
4 Replies Latest reply: Sep 6, 2013 9: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 Newbie
Currently Being Moderated

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

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points