0

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. 

<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

enter image description here

If I change the style of divContainer to 

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

enter image description here

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

kenbuja
  • 252
  • 5
  • 16

2 Answers2

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.

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.
  • Whenever possible, prefer actual stylesheets to inline styles.
Ken Franqueiro
  • 10,559
  • 2
  • 23
  • 40
0

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

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

Thomas Kagan
  • 440
  • 3
  • 16