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;
}
...