Change the rad splitter appearance

5 posts, 0 answers
  1. Lara
    Lara avatar
    3 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    Hi,

    I am trying to achive the splitter button as in the image file attached. Do i need to change the css for this
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Mar 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lara
    Lara avatar
    3 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    i have not used any images with the present code . i have attached the present display and the wanted display
  5. Lara
    Lara avatar
    3 posts
    Member since:
    Mar 2013

    Posted 21 Mar 2013 Link to this post

    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
  6. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 25 Mar 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017