Opened 13 years ago
Closed 12 years ago
#757 closed defect (fixed)
Dialog extends beyond viewport
| Reported by: | 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
| Milestone: | 0.3.1 → 0.4 |
|---|
comment:2 Changed 13 years ago by
| Milestone: | 0.4 → 0.5 |
|---|
comment:3 Changed 13 years ago by
| Owner: | changed from anonymous to NeilRoberts |
|---|
comment:4 Changed 13 years ago by
| Owner: | changed from NeilRoberts to Neil Roberts |
|---|
comment:5 Changed 12 years ago by
| Owner: | changed from Neil Roberts to koranteng |
|---|
comment:6 Changed 12 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
(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).