Opened 13 years ago

Closed 12 years ago

#757 closed defect (fixed)

Dialog extends beyond viewport

Reported by: scott@… Owned by: koranteng
Priority: high Milestone: 0.9
Component: Widgets Version: 0.3
Keywords: dialog viewport overflow Cc:
Blocked By: Blocking:

Description

When there is a lot of content in a dialog, it extends beyond the viewport rather than adding scroll bars. Adding "overflow:auto" to the CSS should add the scrollbars, but only if the dialog div is constrained to the bounds of the viewport. The problem was posted here and the only solution that could be reached without changing the code is the max-height style attribute (not supported in IE).

I'm attaching a simple test case that illustrates what I'm talking about.

<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript">

djConfig = { baseRelativePath: "../js/dojo/" }; var dialogWidget;

</script>

<script type="text/javascript" src="../js/dojo/dojo.js"></script>

<script language="JavaScript?" type="text/javascript">

dojo.require("dojo.widget.ContentPane?"); dojo.require("dojo.widget.Dialog"); dojo.addOnLoad(function(){

dialogWidget = dojo.widget.byId('dialog'); dialogWidget.setCloseControl(dojo.byId('hider'));

}); function showDialog() {

dialogWidget.show();

}

</script>

<style type="text/css"> body { font-family : sans-serif; } div.dojoDialog {

background : #eee; -moz-border-radius : 5px; padding : 15px; border : 1px solid #000;

} #dialogContent {

overflow: auto;

} </style>

</head> <body>

<a href="javascript:showDialog()">Show</a>

<div dojoType="dialog" id="dialog" bgColor="black" bgOpacity="0.4" toggle="fade" toggleDuration="400">

<div id="dialogContent" dojoType="ContentPane?">

<input id="hider" type="button" value="Close"> <p>0</p><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p> <p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p>

</div>

</div>

</body> </html>

Change History (6)

comment:1 Changed 13 years ago by bill

Milestone: 0.3.10.4

comment:2 Changed 13 years ago by dylan

Milestone: 0.40.5

comment:3 Changed 13 years ago by dylan

Owner: changed from anonymous to NeilRoberts

comment:4 Changed 13 years ago by bill

Owner: changed from NeilRoberts to Neil Roberts

comment:5 Changed 12 years ago by koranteng

Owner: changed from Neil Roberts to koranteng

comment:6 Changed 12 years ago by bill

Resolution: fixed
Status: newclosed

(In [7454]) The dialog's containerNode needs its overflow set to auto - and we need to set the height so that overflow takes effect. We also handle the case of dynamically loaded content and lengthen accordingly. Fixes #757 and #2088.

Patch from Koranteng (IBM, CCLA on file).

Note: See TracTickets for help on using tickets.