如何设置一个Dojo TitlePane的高度,相对于外部容器节点的大小

How could i set the height of a Dojo TitlePane, relative to the size of the outer container node?

本文关键字:相对于 外部 节点 高度 TitlePane 设置 何设置 Dojo 一个      更新时间:2023-09-26

在下一个例子中,我在200px高度的容器之间创建了一个TitlePane。我将TitlePane的高度设置为100%,但它似乎没有展开。

相关代码:

var titlePane = new TitlePane({
    title: "TITLE",
    toggleable: false,
    style: "height: 100%; overflow-y: auto",
    content: "foo"
});
var outerPane = new ContentPane({
    content: titlePane,
    style: "height: 200px;"
}, dojo.byId("body2"));

完整的示例:http://jsfiddle.net/bzFPM/

任何想法?

添加此样式

.dijitTitlePaneContentOuter 
{
    height:80%;   
}

我不确定这是不是最好的选择。但这也是工作。

http://jsfiddle.net/bzFPM/4/

我找到了一个使用手风琴容器的解决方案。当只包含一个带有标题的窗格时,它看起来几乎相同。

function example(ContentPane, Accordion, Button){
var titlePane = new Accordion({
       style: "height: 100%; overflow-y: auto"
     });
var innerPane = new ContentPane({title:'TITLE', content:'foo'})
titlePane.addChild(innerPane);
var outerPane= new ContentPane({
    content:titlePane,
    style: "height: 200px;"
}, dojo.byId("body2"));
outerPane.startup()
var button= new Button({
    label:"add line",
    onClick:function(ev){
        innerPane.set("content", innerPane.get("content")+"<br>foo")
    }    
}).placeAt(dojo.byId("body2"), "after");
}
require(["dijit/layout/ContentPane", "dijit/layout/AccordionContainer",
     "dijit/form/Button"], example );
http://jsfiddle.net/bzFPM/5/