Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1025
collapse Button position
posted

How to set the collapse button position i want to have this button in the left side instead of center.

  • 24497
    posted

    Hi Ashpawan,

    The appearance of splitter can be customized using css classes. You may modify the igspl_HSplitBar in ig_splitter.css and it will affect all splitters in application, or you may set custom class to the SplitterBar.CssClass property. Below is example to change alignment from center to left. You also may add any other attributes, like
    padding-left:5px;

    Note: the !important is used in order to override corresponding attribute which is set as inline style of splitterbar.

    <style type="text/css">
        .collapseButtonCss { text-align: left !important; }
    </style>
    <ig:WebSplitter ID="WebSplitter1" runat="server" Height="300px" Orientation="Horizontal" Width="300px">
     <SplitterBar CssClass="collapseButtonCss">
     </SplitterBar>
      <Panes>
      <ig:SplitterPane runat="server" CollapsedDirection="NextPane">
      </ig:SplitterPane>
      <ig:SplitterPane runat="server">
      </ig:SplitterPane>
      </Panes>
    </ig:WebSplitter>