Change the rad splitter appearance

[Lara]

Hi,

I am trying to achive the splitter button as in the image file attached. Do i need to change the css for this

[Princy]

Hi,

Try overriding the default CSS.

CSS:

.RadSplitter_Default .rspPaneTabContainer, .RadSplitter_Default .rspSlideHeaderDockIcon, .RadSplitter_Default .rspSlideHeaderUndockIcon, .RadSplitter_Default .rspSlideHeaderCollapseIcon, .RadSplitter_Default .rspCollapseBarExpand, .RadSplitter_Default .rspCollapseBarCollapse, .RadSplitter_Default .rspCollapseBarHorizontalExpand, .RadSplitter_Default .rspCollapseBarHorizontalCollapse {
    background-image: url("/Img.gif") !important;
}

Thanks,
Princy

[Lara]

i have not used any images with the present code . i have attached the present display and the wanted display

[Lara]

The image attached in the above reply was appearing by default.The collapsible buttons are one below the other. But i want them one beside the other

[Vessy]

Hi Lara,

Basically there are two possible ways to achieve the descried scenario:

• You could use two RadSplitbars, without a RadPane between them, e.g:
  

  <telerik:RadSplitter ID="Radsplitter1" runat="server" Width="700" Height="800" Orientation="Vertical">
      <telerik:RadPane ID="Radpane1" runat="server">
      </telerik:RadPane>
      <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="Forward">
      </telerik:RadSplitBar>
      <telerik:RadSplitBar ID="Radsplitbar2" runat="server" CollapseMode="Backward">
      </telerik:RadSplitBar>
      <telerik:RadPane ID="Radpane2" runat="server">
      </telerik:RadPane>
  </telerik:RadSplitter>

• You could increase the Splitbar's width through the Splitter's SplitBarsSize property and overwrite the display CSS style of the bottom button:
  

  <telerik:RadSplitter ID="Radsplitter1" runat="server" Width="700" Height="800" Orientation="Vertical" SplitBarsSize="8">
      <telerik:RadPane ID="Radpane1" runat="server">
      </telerik:RadPane>
      <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="Both">
      </telerik:RadSplitBar>
      <telerik:RadPane ID="Radpane2" runat="server">
      </telerik:RadPane>
  </telerik:RadSplitter>

  <style type="text/css">
      .RadSplitter .rspCollapseBarCollapse, .RadSplitter .rspCollapseBarExpand
      {
          display: inline !important;
      }
  </style>

Note, that in both of the described approaches, both of the buttons will remain visible after collapse.

Regards,
Vesi
the Telerik team