嵌套在其他ContentPanes中时，ContentPane不会滚动

I am using a Dojo Dialog that contains a TabContainer which has a ContentPane that contains both an image and a nested ContentPane with text. I would like the nested ContentPane to scroll, but I don't want its parent container with the image to scroll.

我正在使用包含TabContainer的Dojo对话框,该对话框具有包含图像和带有文本的嵌套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>

The content of "divDialogMessage" is added dynamically. This gives me the following dialog

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

If I change the style of divContainer to

如果我将divContainer的样式更改为

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

then I get what I don't want, which has the parent ContentPane with both image and text scrolling.

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

What's the correct syntax to only have the text ContentPane scroll?

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

2 个解决方案

#1

You would need to explicitly give your inner ContentPane a height via CSS too, otherwise there's nothing constraining it to need to handle overflow in the first place.

你需要通过CSS明确地给你的内部ContentPane一个高度,否则没有什么限制它需要首先处理溢出。

Example with minimal modification to your code:

对代码进行最小修改的示例:

<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>

Unrelated:

• Avoid using data-dojo-id since it creates global variables. Assign an id then use dijit/registry.byId to retrieve widgets when necessary.

避免使用data-dojo-id,因为它会创建全局变量。分配一个id然后使用dijit / registry.byId在必要时检索小部件。

• Whenever possible, prefer actual stylesheets to inline styles.

只要有可能,请选择实际样式表来内联样式。

#2

You need to set the height of the ContentPane equal to the size you would like the text to occupy.

您需要将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>

Here is a working example: http://jsfiddle.net/kagant15/0s21v90g/

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