CODEWITHSUNDEEP
scrollbardojo
Ryan M
Ryan M

Reputation: 1761

Dojo scrollbar on titlePane within a BorderContainer

I have a titlePane within a borderContainer and I'm trying to make the titlePane have a scrollbar within it. The scrollbar shows up when you drag the splitter to make the titlePane smaller, but the scrollbar falls off the bottom (it looks like it is offset the same height as the titlePane header). Is there any way to have the whole scrollbar in view?

<body class="claro">
<div id="container" data-dojo-type="dijit.layout.BorderContainer" >
    <div id="center" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', layoutPriority: 1">
            center
        </div>
        <div id="bottom" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: 'true'">
             <div class="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'tilepane'">
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
            </div>
    </div> 
 </div>    
</body>

​

Here is the css

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#container {
    width: 100%;
    height: 100%;
}
#bottom {
     padding: 0;
     height: 100px;
}    
.claro .dijitTitlePaneContentOuter {
    height:100%;
    overflow:auto;
}

Here is a working example http://jsfiddle.net/mMTdU/1/

Upvotes: 1

Views: 2226

Answers (1)

Ryan M
Ryan M

Reputation: 1761

I was able to solve this so hopefully it will help if anyone else runs into a similar issue. You can easily extend the class and override the resize function which is called by the borderContainer.

dojo.addOnLoad(init);

function init() {
    dojo.safeMixin(dijit.byId("titlePane"), {
        resize: function() {
            this.inherited(arguments);

            this.hideNode.style.height = (dojo.marginBox(this.domNode).h - dojo.marginBox(this.titleBarNode).h).toString() + "px";
        }
    });

    // set initial height
    var titlePane = dijit.byId("titlePane");
    titlePane.hideNode.style.height = (dojo.marginBox(titlePane.domNode).h - dojo.marginBox(titlePane.titleBarNode).h).toString() + "px";
}​

We need to compute and set the height of the content div within the titlePane as opposed to just giving it a 100% height. You can see it working in the updated jsfiddle link http://jsfiddle.net/mMTdU/2/

Upvotes: 2

Related Questions