0

我正在使用一个包含 TabContainer 的 Dojo 对话框，该 TabContainer 的 ContentPane 包含图像和带有文本的嵌套 ContentPane。我希望嵌套的 ContentPane 滚动，但我不希望其带有图像的父容器滚动。

<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
            <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style:  {overflow: 'hidden'}">
                <img id="projectImage" src="../images/island.png" />
                <div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0}">
                    about this project
                </div>
            </div>

“divDialogMessage”的内容是动态添加的。这给了我以下对话框

在此处输入图像描述

如果我将 divContainer 的样式更改为

                <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction', style:  {overflow: 'auto'}">

然后我得到了我不想要的东西，它的父 ContentPane 具有图像和文本滚动。

在此处输入图像描述

只有文本 ContentPane 滚动的正确语法是什么？

4

2 回答 2

1

您还需要通过 CSS 明确地为您的内部 ContentPane 指定一个高度，否则没有什么限制它首先需要处理溢出。

对您的代码进行最少修改的示例：

<div data-dojo-type="dijit/Dialog" data-dojo-id="dialogWelcome" data-dojo-props="title: 'About'" style="width: 650px; align-content: center;">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
        <div data-dojo-type="dijit/layout/TabContainer" data-dojo-props="style: {width: '100%', height: '600px'}">
            <div data-dojo-type="dijit/layout/ContentPane" id="divContainer" data-dojo-props="title: 'Project Introduction'">
                <img id="projectImage" src="../images/island.png" />
                <div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '500px'}">
                    about this project
                </div>
            </div>
        </div>
    </div>
</div>

无关：

  • 避免使用data-dojo-id，因为它会创建全局变量。必要时分配一个idthen 用于dijit/registry.byId检索小部件。
  • 只要有可能，更喜欢实际的样式表而不是内联样式。
于 2014-10-03T14:36:48.353 回答
0

您需要将 ContentPane 的高度设置为您希望文本占据的大小。 

<div data-dojo-type="dijit/layout/ContentPane" id="divDialogMessage" data-dojo-props="style: {overflow: 'auto', padding: 0, height: '150px'}">
 lots of text goes here to make overflow...
</div>

这是一个工作示例：http: //jsfiddle.net/kagant15/0s21v90g/

于 2014-10-03T17:50:36.917 回答