0

画像とネストされた ContentPane の両方をテキストで含む ContentPane を持つ TabContainer を含む Dojo ダイアログを使用しています。ネストされた 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

内部の ContentPane にも CSS を介して明示的に高さを指定する必要があります。それ以外の場合、最初にオーバーフローを処理する必要があるという制約はありません。

コードの変更を最小限に抑えた例:

<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グローバル変数を作成するため、使用しないでください。を割り当てて、必要に応じてウィジェットを取得するためidに使用します。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 に答える