OBOUT - ASP.NET Splitter

ASP.NET Splitter Tutorial - CSS

Open CSS file in Notepad. Feel free to edit.

CSS file style.css is located according property StyleFolder
Example: spl1.StyleFolder = "splitterstyles/default"

Border

Border around the Splitter can be set using ob_spl_panel class in the style sheet.

Example:

    /* for table where splitter is placed */
    .ob_spl_panel {
        border: 1px solid #999999;

Background color

Background color can be set for splitter panels using ob_spl_leftpanelcontent, ob_spl_rightpanelcontent classes in the style sheet.

    /* for left panel content */
    .ob_spl_leftpanelcontent {
        background-color: #eeeeee;

    /* for right panel content */
    .ob_spl_rightpanelcontent {
        background-color: #eeeeee;

Background image

Background image can be set for splitter panels using ob_spl_leftpanelcontent, ob_spl_rightpanelheader, ob_spl_rightpanelcontent, etc. classes in the style sheet.

    /* for left panel content */
    .ob_spl_leftpanelcontent {
        background-image: url('../images/pagebg.jpg');

    /* for right panel content */
    .ob_spl_rightpanelcontent {
        background-color: url('../images/world.jpg');

Scrollbars

Scrollbars can be set or removed using ob_spl_leftpanelcontent, ob_spl_leftpanelfooter, ob_spl_rightpanelheader, etc. classes.

Use one of these values:
visible - No scrollbars.
scroll - Always show scrollbars.
auto - Show scrollbars where necessary (horizontal or vertical or both).

    /* for left panel content */
    .ob_spl_leftpanelcontent {
        overflow: auto;

For IE you can also use separate overflow-X and overflow-Y (not in Mozilla).

Separator

Separator style can be set using ob_spl_dividervertical class.

    /* for vertical panels separator */
    .ob_spl_dividervertical {
        width: 12px;
        background-image: url(../images/icq_dividerVertical.gif);
        background-repeat: no-repeat;
        background-position: center center;

Resizing Bar

Resizing bar style can be set using ob_spl_resizebarvertical class.

    /* for vertical panels separator */
    .ob_spl_resizebarvertical {
        border: 2px dashed crimson;

Collapsing background

Collapsing background can be set using ob_spl_collapseleft, ob_spl_collapseright classes in the style sheet.

Example:

    /* for left collapsing */
    .ob_spl_collapseleft {
        background-color: white;
        border: 1px solid crimson;

    /* for right collapsing */
    .ob_spl_collapseright {
        background-color: white;
        border: 1px solid crimson;

Collapsing image

Collapsing image can be set using ob_spl_collapseleft, ob_spl_collapseright classes in the style sheet.

Example:

    /* for left collapsing */
    .ob_spl_collapseleft {
        background-image: url('../images/arrow_left.gif');
        background-repeat: no-repeat;
        background-position: center center;
        background-color: white;
        border: 1px solid black;

    /* for right collapsing */
    .ob_spl_collapseright {
        background-image: url('../images/arrow_right.gif');
        background-repeat: no-repeat;
        background-position: center center;
        background-color: white;
        border: 1px solid black;

"Since the birth of ASP.NET I have tried several components, but your product is unquestionably the best collection of ASP.NET controls. Absolutely great products!"

Viggo Barbala

Norway

Random testimonial All testimonials