Opened 12 years ago

Closed 12 years ago

Last modified 9 years ago

#5483 closed defect (invalid)

Erratic textarea behavior in a dialog box

Reported by: guest Owned by: bill
Priority: lowest Milestone:
Component: Dijit - Form Version: 1.0
Keywords: textarea dialog Cc: jackett_dad@…
Blocked By: Blocking:

Description (last modified by Douglas Hays)

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 "-W3CDTD HTML 4.01 TransitionalEN"

"http://www.w3.org/TR/html4/loose.dtd">

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

Attachments (3)

ticket.html (3.2 KB) - added by guest 12 years ago.
The html source demonstrating the problem
demo_html_5483.zip (35.6 KB) - added by guest 12 years ago.
html demonstrating the issue
dojo_resources_5483.zip (39.3 KB) - added by guest 12 years ago.
drop this into the root dojo folder for my specific controls

Download all attachments as: .zip

Change History (24)

Changed 12 years ago by guest

Attachment: ticket.html added

The html source demonstrating the problem

comment:1 Changed 12 years ago by guest

Sorry, I should have been more specific with the problem description. I originally submitted this because the dialog textarea does not allow itself to be contained by the surrounding LayoutContainer?, expanding outside its boundaries. In the attached example, I have provided a text area in the main page that behaves correctly. Then, I have provided a dialog box that is invoked by a button press with the same exact textarea that doesn't work at all. In my actual code, my textarea accepts input but in my example it does not. So I have more than one problem. Obviously there is something about the dialog box that is not working well with the textarea. I hope this is enough explanation.

comment:2 Changed 12 years ago by Douglas Hays

Resolution: invalid
Status: newclosed
<div dojoType="dijit.layout.ContentPane" layoutAlign="top">
    <form onsubmit="return false">
        <input dojoType="dijit.form.Textarea" rows="2" cols="55"/>
    </form>
</div>

should be:

<div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="width:100%;">
    <form onsubmit="return false">
        <input dojoType="dijit.form.Textarea"/>
    </form>
</div>

since it's a popup without a default width. Also the DOM attributes rows and cols are not supported with the Textarea widget. Width should be set via css. Height is automatically calculated.

comment:3 Changed 12 years ago by guest

Resolution: invalid
Status: closedreopened

Thank you for looking at this. With the changes you have provided, it makes my test case work. However, in my "real" page, it still occurs. I will try to provide another test case. I may have to debug this myself, so can you give me some information as to where to look for the problem? There must be a connection that is not being made as the ContentPane? is not being contained by the LayoutContainer?. In fact, when the textarea renders, its right boundary already cinches over the outside of the ContentPane? instead of being clipped by it as it does when functioning correctly.

What code detects this situation? Where could I set a breakpoint? If I can see what condition is not detected, then I could give more precise information, or even know what needs to change in order to fix it.

comment:4 Changed 12 years ago by Douglas Hays

Milestone: 2.0
Priority: highlowest

I don't know of any code for this - it's all css. You should look at the widths of parent nodes in your debugger. This is how I saw your ContentPane? had 0 width and thus the contained textarea also had 0 width and couldn't easily by typed in. I can't recreate this w/o a testcase so I'm lowering the priority.

comment:5 Changed 12 years ago by guest

Thanks, that's a great start. I can't give you the code I'm really using because it involves too much on the back end. I will update once I know something more.

comment:6 Changed 12 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

Changed 12 years ago by guest

Attachment: demo_html_5483.zip added

html demonstrating the issue

Changed 12 years ago by guest

Attachment: dojo_resources_5483.zip added

drop this into the root dojo folder for my specific controls

comment:7 Changed 12 years ago by guest

I just added two zipped archives of an exact duplicate of my problem. In demo_html there is the html and resources needed to display the page. Put that in a folder and preserve the folder hierarchy.

The second needs to be unzipped into the root of dojo where the other folders are dijit, dojo and dojox. This is some of my specific controls (I'm a rookie, ok?) because I have overridden the text area to change the coloring. I'm sure there's a better way.

In the main page, there is a description field that you can play with to see that it works right. Click in the lower right Custom Data Types and play with that description field, and that doesn't work. At one point these were both the exact same code, but looking at the differences in css styles, I tweaked some settings in the second (malfunctioning) one to make the styles come out the same.

Anyway, you should see the problem.

Please help! The custom data types dialog is supposed to be in production but I had to disable the button for the release because of this issue. Sorry I haven't provided a better example, but this is the real thing taken by viewing the source and dumbing it down to be able to demo here.

comment:8 Changed 12 years ago by guest

The two js files of interest are cp_controls.js, which creates the textarea (that works) at line 86, and customDataTypeDetails.js, which creates the textarea that doesn't work at line 38.

comment:9 Changed 12 years ago by Douglas Hays

Description: modified (diff)
Milestone: 1.31.1.1
Owner: set to bill
Status: reopenednew

Remove class="dijitTextBox" from your LayoutContainer? widget markup instantiation. Those don't go together. I think this fixes your issue in dojo 1.0.
In dojo 1.1, I'm seeing another problem that needs investigation: In dijit/Tree.js:

if(!parent || parent.rowNode.style.display == "none"){

may need to be:

if(!parent || !parent.rowNode || parent.rowNode.style.display == "none"){

IE7 is throwing an exception using this testcase.

comment:10 Changed 12 years ago by guest

I changed both instances of the textarea to be without the style dijitTextBox, then made the dialog declaration look almost exactly like the one in the main page (except for the ids of the widgets LayoutContainer? and the text area:

<div dojoType="dijit.layout.LayoutContainer?"

id="dataTypeDescriptionLayoutContainer" style="width: 270px; height: 70px; text-align:left; vertical-align:top; overflow:auto;"> <div dojoType="dijit.layout.ContentPane?"

id="dataTypeDescriptionContentPane" layoutAlign="top">

<textarea id="dataTypeDescription" rows="2" cols="55"/>

</div>

</div>

The rendering of the dialog textarea comes out with horizontal and vertical scroll bars and bunches it up vertically. It behaves a little better, but when it reaches a certain amount of rows in the text area it pushes the page elements down. The area in the main page works perfectly.

Thanks so far. It might end up being something minor after all.

comment:11 Changed 12 years ago by Douglas Hays

add display:block to the textarea

comment:12 Changed 12 years ago by guest

No difference. I added style="display:block" to the textarea definitions. Still behaves the same.

comment:13 Changed 12 years ago by Douglas Hays

Adding it there would have no impact for programmatic widget creation. Try it here:

var textarea = new metastorm.keadmin.Textarea(
    {   id                      : "dataTypeDescription",
        boxWidth                : "250px",
    style:"display:block;",
        borderColor             : "white",
        onTextAreaChanged       : this.dataTypeDescriptionFieldChanged
    },
    dojo.byId( "dataTypeDescription" ) );

comment:14 Changed 12 years ago by Adam Peller

Resolution: invalid
Status: newclosed

please reopen new ticket(s) if necessary. This is no longer possible to follow. Doug, were your Tree comments above for 1.1.1 related, or do they belong in a separate ticket?

comment:15 Changed 12 years ago by Douglas Hays

The tree comments above were for this problem on 1.1. The reporter is only testing on 1.0. This appears to be a regression in the current trunk. I think this ticket should remain open. Unfortunately most of this ticket's comments are for user problems understanding dijit CSS.

comment:16 Changed 12 years ago by guest

It's true that I don't understand dijit css very well, but I think if I drop the same control in two different places on the same page (with the same settings) that it should be expected that it would render the same without having to tweak css settings to make it so.

I appreciate the help so far. The last setting of display:block seems to have helped. I'm seeing double scroll bars, but that's no big deal. I'm sure I can figure it out. The inner area is now constrained by the outer. I appreciate the help as the getting of this to work is critical. I will come back to officially close this, but for the sake of future revisions of dojo it would beneficial to understand why it didn't work for me in the first place.

comment:17 Changed 12 years ago by Adam Peller

Sorry for my abrupt closing of this ticket. We just have an (unwritten) rule in Dojo to keep trac tickets short and to the point, and I for one got lost trying to figure out what is needed for 1.1.1 or elsewhere, so let's start over. If further discussion is needed, let's move it to the forum, then return with new tickets in trac once the issues are known. Any code examples or patches should be posted as attachments.

Doug, let's open a new ticket for 1.1.1 with just the Tree issues. Thanks.

comment:18 Changed 12 years ago by guest

I'm going to open another ticket with a miniscule sample that doesn't have any extra frills. There is a problem with the way dojo is rendering in the example of a dialog.

comment:19 Changed 12 years ago by bill

See #6360 (that's the new ticket mentioned above)

comment:20 Changed 12 years ago by Adam Peller

Milestone: 1.1.1

comment:21 Changed 9 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.