Ticket #5483 (closed defect: invalid)
Erratic textarea behavior in a dialog box
| Reported by: | guest | Owned by: | bill |
|---|---|---|---|
| Priority: | lowest | Milestone: | |
| Component: | Dijit | Version: | 1.0 |
| Severity: | critical | Keywords: | textarea dialog |
| Cc: | jackett_dad@… |
Description (last modified by doughays) (diff)
I have a textarea that is working correctly in a main page, but the same textarea in a dialog box is not working. I have put together a comprehensive html page that demonstrates the problem exactly, and can provide it upon request since I am not able to create an attachment here. I will paste the source below, and my email address is cc'd on this ticket (jackett_dad@…).
I am using the current release of dojo 1.0.2 on Windows XP Pro, Windows Internet Explorer 7. Not sure what more details you might need, but I will be happy to provide.
Here is my source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html> <head>
<title>Checkbox tree sample</title>
<style type="text/css">
@import "/proserver/dojo/dijit/themes/tundra/tundra.css"; @import "/proserver/dojo/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="/proserver/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"> </script>
<script type="text/javascript">
dojo.require( "dijit.form.Textarea" ); dojo.require( "dijit.layout.LayoutContainer?" ); dojo.require( "dijit.layout.ContentPane?" ); dojo.require( "dijit.form.Button" ); dojo.require( "dijit.Dialog" );
</script>
<script type="text/javascript">
function invokeDialog() {
var dialog = dijit.byId( "ticketDialog" ); dialog.show();
}
</script>
</head> <body class="tundra">
<br/>
<p>Ignore the gray line in the text area. In my actual code (this is a demo of the problem), I set the style of the border to white, keeping it from being visible to the viewer. Note that this text area functions in all the ways that I expect. If too much text is entered, the scroll bar appears.</p> <div dojoType="dijit.layout.LayoutContainer?" class="dijitTextBox"
style="width: 470px; height: 70px; text-align:left; vertical-align:top; overflow:auto;"> <div dojoType="dijit.layout.ContentPane?" layoutAlign="top">
<form onsubmit="return false">
<input dojoType="dijit.form.Textarea" rows="2" cols="55"/>
</form>
</div>
</div>
<div dojoType="dijit.Dialog" id="ticketDialog" title="Faulty Text Area" style="display:none">
<table>
<tr>
<td>
The text area below will not accept input. In other examples<br/> this works for me, but when more lines are entered in the text area<br/> than the LayoutContainer? holds, the text area expands outside the container<br/> area. This code is the same code as shown in the main page, but because it <br/> is in the dialog, it doesn't work the same.
</td>
</tr> <tr>
<td>
<div dojoType="dijit.layout.LayoutContainer?" class="dijitTextBox"
style="width: 470px; height: 70px; text-align:left; vertical-align:top; overflow:auto;"> <div dojoType="dijit.layout.ContentPane?" layoutAlign="top">
<form onsubmit="return false">
<input dojoType="dijit.form.Textarea" rows="2" cols="55"/>
</form>
</div>
</div>
</td>
</tr> <tr>
<td align="center">
<button dojoType="dijit.form.Button" type="submit">OK</button>
</td>
</tr>
</table>
</div>
<button dojoType="dijit.form.Button" onclick="invokeDialog()">Show dialog</button>
</body> </html>
