Opened 10 years ago

Closed 10 years ago

Last modified 8 years ago

#10308 closed defect (wontfix)

textarea adding vertical whitespace in firefox

Reported by: mark007 Owned by:
Priority: high Milestone: tbd
Component: Dijit - Form Version: 1.4.0b
Keywords: Cc:
Blocked By: Blocking:

Description

Hi,

I have a page that I have been working on for many months, and have noticed a niggling problem that seems to be related to a textarea. Below one of my textareas exists a contentpane and a border container.

In all browsers this appears fine except for firefox 3+ (I havn't tested older firefox versions).

When loading the files below in firefox you will notice below the textarea in the top left of the screen, a white area. This white area collapses as soon as the vertical bordercontainer is moved. After the bordercontainer is resized with your mouse (using the splitter I have on the page), the page will move / resize and now appear identical to ie or chromes version of the page but when the page loads initially this is not the case. The whitespace disappears below the textarea.

I have seen this in version 1.3+ of dojo.

Apologies for all of the code below, I am unsure what parts are helping cause the problem but have removed most of the original page.

index.php

<html>
    <title>Tool</title>
    <link rel=stylesheet href="dojo1.4b2/dijit/themes/soria/soria.css" type="text/css">
    <link rel=stylesheet href="dojo1.4b2/dojo/resources/dojo.css" type="text/css">
    <link rel=stylesheet href="style.css" type="text/css">
    <body class="soria">
        <div dojoType="dijit.layout.BorderContainer" id="mainContainer" gutters="false">
            <div dojoType="dijit.layout.ContentPane" region="left" splitter="true" minSize="500" style="width:500" >

                        <div dojoType="dijit.layout.BorderContainer" gutters="false">
                            <div dojoType="dijit.layout.ContentPane" region="top">
                                <form id="network_form" dojoType="dijit.form.Form">

                                    <label>Description:</label>
                                    <textarea dojoType="dijit.form.Textarea" id="network_description" name="network_description">Give description.</textarea>
                                </form>
                            </div>
                            <div dojoType="dijit.layout.ContentPane" region="center">
                                <div dojoType="dijit.layout.BorderContainer" >
                                    <div dojoType="dijit.layout.ContentPane" region="top">
                                    </div>
                                </div>
                            </div>
                        </div>
            </div>
            <div dojoType="dijit.layout.ContentPane" region="center">

            </div>

        </div>
    </body>
    <script type="text/javascript" src="./dojo1.4b2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript" src="functions.js"></script>
</html>

functions.js

dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.form.Form");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.Tooltip");
dojo.require("dojo.parser");

style.css

#mainContainer
{
        width:100%;
        height:100%;
        margin: 0;
        padding:0;
}

label, .dijitTextBox, .dijitComboBox, form .dijitTextArea {
        display: block;
        width: 200px;
        float: left;
        margin-bottom: 1em;
    }


    label {
        text-align: right;
        width: 140px;
        padding-right: 1em;
    }

    .clear {
      clear: both;
    }

Change History (7)

comment:1 Changed 10 years ago by Douglas Hays

Component: GeneralDijit
Milestone: 1.4tbd
Owner: anonymous deleted

It's because firefox needs help shrinking a textarea. So when Textarea._shrink() is called, then the BorderContainer? needs to resize its children. You can connect to _shrink and then call layout() on the BorderContainer? widget.

comment:2 Changed 10 years ago by bill

Even if there wasn't this problem Doug described above, it seems like your design is problematic. You Textarea is inside the top pane of a BorderContainer, but that pane has no size specified. So the pane tries to size to fit it's content. However, the Textarea will change size as the user types in more text (or deletes the text that's there), at which point I'm not sure what happens.... BorderContainer isn't setup to handle size changes in it's children panes. It seems like maybe you want to use SimpleTextArea instead? Or at least specify a size on that top pane, like style="height: 200px;"?

comment:3 Changed 10 years ago by bill

Resolution: wontfix
Status: newclosed

Closing this ticket... user code needs to change as documented above.

comment:4 Changed 10 years ago by mark007

I used minSize instead of size. So is the problem in firefox? If so I will post bug report with mozilla.

comment:5 Changed 10 years ago by Douglas Hays

The Firefox bug that I referred to earlier is that a native textarea.scrollHeight grows as you add more lines to an HTML TEXTAREA, but when you delete the contents of the textarea, it does not shrink scrollHeight.

comment:6 Changed 10 years ago by bill

Mark, what exactly are you expecting/wanting to happen when the user types into the Textarea? Do you want the Textarea to change size, or to get a scrollbar? If you are expecting the Textarea to get bigger, then what do you want to happen to the top pane of the BorderContainer? To get bigger, or to get a scrollbar?

comment:7 Changed 8 years ago by bill

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