Is it possible to have different css classes for collapsing and expanding buttons. I like to use css sprites for optimizing performance. That is not possible now.

Hi rkoops,

The WebSplitter uses IMG elements for its collapse buttons and it changes src of those elements depending on states of corresponding splitter panes. The css for that splitter "button" is used only to set permanent appearance like cursor.

There are no public acces to those IMG elements. Though, there is an internal member variable _collapseImg in the SplitterPane for that element. So, in theory it is possible to customize its className. The best I can do is to give you example how it can be done

<style type="text/css">
 .but1
 {
  border-left:1px solid red;
 }
 .but2
 {
  border-left:1px solid blue;
 }
</style>
<script type="text/javascript">
function splitterLoaded(splitter)
{
  var pane = splitter.get_panes()[0];
  if(pane)
  {
   var img = pane._collapseImg;
   if(img)
    img.className += ' but1';
  }
  pane = splitter.get_panes()[1];
  if(pane)
  {
   var img = pane._collapseImg;
   if(img)
    img.className += ' but2';
  }
}
</script>
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="139px" Width="470px">
  <Panes>
   <ig:SplitterPane runat="server" CollapsedDirection="NextPane">
   </ig:SplitterPane>
   <ig:SplitterPane runat="server" CollapsedDirection="PreviousPane">
   </ig:SplitterPane>
  </Panes>
  <ClientEvents Loaded="splitterLoaded" />
</ig:WebSplitter>

I have been customized the splitter bar images as you specified on above, however I am facing the problem like getting horizontal scroll bars. If I use existed splitter bar images it's working fine as expected. Any idea would be help for me.

Thanks in advance.

Chinna.

Hello Viktor,

I have tried by reducing the splitter width  and by inspecting the elements. I was bit busy with my work. I will try once again by following your steps. I will get back you soon if I have struck any where.

thanks for your and time convention to reply.

Regards,

Chinna.

Hi Chinna,

I did not notice horizontal scrollbar within splitter. If it is scrollbar at the bottom of page (container/s of splitter), then maybe you need to reduce with of splitter by few pixels or by fraction of percent:
<ig:WebSplitter ID="WebSplitter1" runat="server" Height="99.5%" Width="99.5%">

You also may try to inspect generated html within dev tools of a browser and experiment with style attributes used by splitter. The containers of splitter buttons are TD with class igspl_VSplitBarWidth and DIV with class igspl_VSplitBar. They can be customized by SplitterBar.ThicknessCssClass and SplitterBar.CssClass properties of WebSplitter. Default classes have widths with value of 10px. While loading, javascript of splitter may validate and adjust those attributes using element.style.width.
You may debug by manual changing width of TD/DIV and check if that affects overall width of splitter and horizontal scrollbar. If reason for scrollbar is widths of those elements, then you should find correct values of width (and maybe some other css attributes) and use them within custom SplitterBar.ThicknessCssClass and SplitterBar.CssClass.