Authors:Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama

FixedSplitter is a very simple container widget that layouts its child dom nodes side by side either horizontally or vertically. An example usage of this widget would be to realize the split view on iPad. There is no visual splitter between the children, and there is no function to resize the child panes with drag-and-drop. If you need a visual splitter, you can specify a border of a child dom node with CSS. A child of the widget should be FixedSplitterPane.



FixedSplitter is in a separate module file from _base.js. You need to dojo.require FixedSplitter as below. If you load FixedSplitter, FixedSplitterPane will be automatically loaded as well.

@import "../themes/common/FixedSplitter.css";
html, body{
    height: 100%;
    overflow: hidden;
    position: relative;

Constructor Parameters

Parameter Type Default Description
orientation String “H” The direction of split. If “H” is specified, panes are split horizontally. If “V” is specified, panes are split vertically.


Declarative example1

<div data-dojo-type="" orientation="H">
    <div data-dojo-type="" style="width:200px;border-right:1px solid black;background-color:yellow;">
        pane #1 (width=200px)
    <div data-dojo-type="" style="background-color:pink;">
        pane #2

Declarative example2

<div data-dojo-type="" orientation="V">
    <div data-dojo-type="" style="background-color:cyan;height:200px;">
        pane #1 (height=200px)
    <div data-dojo-type="" style="background-color:yellow;height:100px;border-bottom:1px solid black">
        pane #2 (height=100px)
    <div data-dojo-type="" style="background-color:pink;">
        pane #3

Programmatic example3

var w = new{
    orientation: "H"
}, dojo.byId("container"));

var p0 = new{
    innerHTML: "pane #1 (width=200px)"
}); = "yellow"; = "200px";

var p1 = new{
    innerHTML: "pane #2"
}); = "pink";
Error in the documentation? Can’t find what you are looking for? Let us know!