ASP.NET Splitter - Multiple splitters with different styles on the same page

Exist 2 cases with multiple splitters on the same page:
  • Only one splitter is visible at the same time in the webpage.
    View example.

  • More than one splitter is visible at the same time in the webpage.
    View example.

Example 1

If only one splitter is visible at the same time in the webpage, you can use different styles by simply setting a different StyleFolder property for each Splitter.

For example:
    <obspl:Splitter runat="server" StyleFolder="styles/default">
    <obspl:Splitter runat="server" StyleFolder="styles/obout">


Example 2

If more than one splitter is visible at the same time in the webpage, you need to use different css class names for the splitter panels.
To accomplish this you need to use CSSPath, CSSPanel, CSSLeftPanelContent, etc. properties.
More information on these properties you can find in Styles properties documentation page.


For the first splitter you don't need to do anything.

For the second splitter on your webpage you need to add CSSPath, CSSPanel, CSSTopPanelContent, etc. properties.
Second splitter on your page has the css class names suffixed by "_1".

            <obspl:HorizontalSplitter runat="server"
                 CSSPath="styles/ExtraStyle/style.css" CSSPanel="ob_spl_panel_1"
                 CSSDivider="ob_spl_dividerhorizontal_1" CSSResizeBar="ob_spl_resizebarhorizontal_1"
                 CSSTopPanel="ob_spl_toppanel_1" CSSTopPanelHeader="ob_spl_toppanelheader_1"
                 CSSTopPanelContent="ob_spl_toppanelcontent_1" CSSTopPanelFooter="ob_spl_toppanelfooter_1"
                 CSSBottomPanel="ob_spl_bottompanel_1" CSSBottomPanelHeader="ob_spl_bottompanelheader_1"
                 CSSBottomPanelContent="ob_spl_bottompanelcontent_1" CSSCollapseTop="ob_spl_collapsetop_1"
                 CSSCollapseBottom="ob_spl_collapsebottom_1" CSSBottomPanelFooter="ob_spl_bottompanelfooter_1">
                <TopPanel>
                    <Content>
                        ... Top Panel content here ...
            ...        

Also for the second splitter you need to edit the style file specified by CSSPath property, and add to the names of the classes "_1".

        .ob_spl_toppanelheader_1
        {
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            background-color:white;
            overflow:auto;
        }
        .ob_spl_toppanelcontent_1
        {
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            background-color:white;
            overflow:auto;
        }
        
        ...