You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Davide Bonicelli <da...@gmail.com> on 2008/06/10 23:00:23 UTC
[Trinidad] Form fields moving on submit in IE7
Hi all,
I've a problem with an application I'm developing in Trinidad (version
1.0.7) when I access it with IE7.
When I submit a page containing a form with client side validation, the
fields in the form move out of position while the action is executed.
The page works perfectly, but it looks pretty ugly when the fields move.
It looks as if space is added to the page for the error messages that would
be displayed during client side validation under the form fields, even if
there are no errors and this cause the fields to "slide" down.
The same problem is present in a page where I have a table with "Previous"
and "Next" enabled. If I click "Next", the fields of the form I've at the
top of the page move out of position and stay in the wrong position until
the page is reloaded.
This problem is not present in FF2.
Here are two examples of code where I have this problem:
[CODE]
//example 1
<tr:panelFormLayout rows="2">
<tr:inputText value="#{incomingCallCaseSearch.lastName}" label="Last Name:"
columns="20" id="inputLastnameId" />
<tr:inputText value="#{incomingCallCaseSearch.caseNumber}" label="Case
Number:" columns="20"
id="inputCaseNumId" maximumLength="9" />
<tr:inputText value="#{incomingCallCaseSearch.firstName}" columns="20" label
="First Name:"
id="inputFirstnameId" />
<tr:panelLabelAndMessage label="SSN:" id="labelMessagePanelID">
<tr:panelHorizontalLayout id="horizontalPanelID">
<tr:inputText value="#{incomingCallCaseSearch.ssnComp1}" columns="2"
id="INCOMINGinputSSN1Id"
inlineStyle="margin-left: -8px" maximumLength="3"
onkeyup="autoTab(this, 3, 'INCOMINGinputSSN2Id', event);"/>
<tr:inputText value="#{incomingCallCaseSearch.ssnComp2}" columns="1"
id="INCOMINGinputSSN2Id"
maximumLength="2"
onkeyup="autoTab(this, 2, 'INCOMINGinputSSN3Id', event);"/>
<tr:inputText value="#{incomingCallCaseSearch.ssnComp3}" columns="3"
id="INCOMINGinputSSN3Id"
maximumLength="4" />
</tr:panelHorizontalLayout>
</tr:panelLabelAndMessage>
</tr:panelFormLayout>
<div style="height: 5px" />
<div style="align: center; margin-left: 370px"><tr:panelButtonBar>
<tr:commandButton id="searchButton" text="Search"
action="#{incomingCallCaseSearch.search}"
onclick="return disableSearchOnClick();"/>
<tr:resetButton text="Reset" id="resetButtonID"/>
</tr:panelButtonBar></div>
//example 2
<tr:panelFormLayout rows="3">
<tr:inputText value="#{login.username}"
label="Username" required="true" columns="15"
maximumLength="255" id="inputUsernameId">
</tr:inputText>
<tr:inputText value="#{login.password}"
label="Password" required="true" columns="15"
maximumLength="255" secret="true" id="inputPasswordId" >
</tr:inputText>
<tr:selectBooleanCheckbox label="Log only into local system?"
value="#{login.loginLocally}" id="inputLoginLocallyId" />
</tr:panelFormLayout>
<tr:panelHorizontalLayout inlineStyle="margin-left: 235px">
<tr:commandButton text="Login" id="loginButtonId" action="#{login.login}"
blocking="true" inlineStyle="width: 60px; margin-left: 2px"
onclick="return disableLoginOnClick();"/>
</tr:panelHorizontalLayout>
[/CODE]
Any idea on how to solve this problem?
Thanks for your help
Davide
Re: [Trinidad] Form fields moving on submit in IE7
Posted by Davide Bonicelli <da...@gmail.com>.
Thanks Richard and Matthias,
I'll try the suggested fix!
Davide
On Tue, Jun 10, 2008 at 4:50 PM, Matthias Wessendorf <ma...@apache.org>
wrote:
> I tried in the past, and had problems in reproducing that issue.
>
> let me try this again, perhaps on the weekend.
>
> -M
>
> On Tue, Jun 10, 2008 at 2:40 PM, Richard Yee <ri...@gmail.com>
> wrote:
> > Davide,
> > I think this is the same as TRINIDAD-992 in Jira.
> >
> > -Richard
> >
> >
> > On 6/10/08, Davide Bonicelli <da...@gmail.com> wrote:
> >>
> >> Hi all,
> >> I've a problem with an application I'm developing in Trinidad
> (version
> >> 1.0.7) when I access it with IE7.
> >> When I submit a page containing a form with client side validation, the
> >> fields in the form move out of position while the action is executed.
> >> The page works perfectly, but it looks pretty ugly when the fields move.
> >>
> >> It looks as if space is added to the page for the error messages that
> >> would be displayed during client side validation under the form fields,
> even
> >> if there are no errors and this cause the fields to "slide" down.
> >> The same problem is present in a page where I have a table with
> "Previous"
> >> and "Next" enabled. If I click "Next", the fields of the form I've at
> the
> >> top of the page move out of position and stay in the wrong position
> until
> >> the page is reloaded.
> >> This problem is not present in FF2.
> >>
> >> Here are two examples of code where I have this problem:
> >>
> >> [CODE]
> >>
> >> //example 1
> >>
> >> <
> >>
> >> tr:panelFormLayout rows="2">
> >>
> >> <tr:inputText value="#{incomingCallCaseSearch.lastName}" label="Last
> >> Name:"
> >>
> >> columns="20" id="inputLastnameId" />
> >>
> >> <tr:inputText value="#{incomingCallCaseSearch.caseNumber}" label="Case
> >> Number:" columns="20"
> >>
> >> id="inputCaseNumId" maximumLength="9" />
> >>
> >> <tr:inputText value="#{incomingCallCaseSearch.firstName}" columns="20"
> >> label="First Name:"
> >>
> >> id="inputFirstnameId" />
> >>
> >> <tr:panelLabelAndMessage label="SSN:" id="labelMessagePanelID">
> >>
> >> <tr:panelHorizontalLayout id="horizontalPanelID">
> >>
> >> <tr:inputText value="#{incomingCallCaseSearch.ssnComp1}" columns="2"
> >> id="INCOMINGinputSSN1Id"
> >>
> >> inlineStyle="margin-left: -8px" maximumLength="3"
> >>
> >> onkeyup="autoTab(this, 3, 'INCOMINGinputSSN2Id', event);"/>
> >>
> >> <tr:inputText value="#{incomingCallCaseSearch.ssnComp2}" columns="1"
> >> id="INCOMINGinputSSN2Id"
> >>
> >> maximumLength="2"
> >>
> >> onkeyup="autoTab(this, 2, 'INCOMINGinputSSN3Id', event);"/>
> >>
> >> <tr:inputText value="#{incomingCallCaseSearch.ssnComp3}" columns="3"
> >> id="INCOMINGinputSSN3Id"
> >>
> >> maximumLength="4" />
> >>
> >> </tr:panelHorizontalLayout>
> >>
> >> </tr:panelLabelAndMessage>
> >>
> >> </tr:panelFormLayout>
> >>
> >> <
> >>
> >> div style="height: 5px" />
> >>
> >> <div style="align: center; margin-left: 370px"><tr:panelButtonBar>
> >>
> >> <tr:commandButton id="searchButton" text="Search"
> >>
> >> action="#{incomingCallCaseSearch.search}"
> >>
> >> onclick="return disableSearchOnClick();"/>
> >>
> >> <tr:resetButton text="Reset" id="resetButtonID"/>
> >>
> >> </tr:panelButtonBar></div>
> >>
> >>
> >>
> >> //example 2
> >>
> >> <
> >>
> >> tr:panelFormLayout rows="3">
> >>
> >> <tr:inputText value="#{login.username}"
> >>
> >> label="Username" required="true" columns="15"
> >>
> >> maximumLength="255" id="inputUsernameId">
> >>
> >> </tr:inputText>
> >>
> >> <tr:inputText value="#{login.password}"
> >>
> >> label="Password" required="true" columns="15"
> >>
> >> maximumLength="255" secret="true" id="inputPasswordId" >
> >>
> >> </tr:inputText>
> >>
> >> <tr:selectBooleanCheckbox label="Log only into local system?"
> >>
> >> value="#{login.loginLocally}" id="inputLoginLocallyId" />
> >>
> >> </tr:panelFormLayout>
> >>
> >> <tr:panelHorizontalLayout inlineStyle="margin-left: 235px">
> >>
> >> <tr:commandButton text="Login" id="loginButtonId"
> action="#{login.login}"
> >>
> >> blocking="true" inlineStyle="width: 60px; margin-left: 2px"
> >>
> >> onclick="return disableLoginOnClick();"/>
> >>
> >> </tr:panelHorizontalLayout>
> >>
> >> [/CODE]
> >>
> >> Any idea on how to solve this problem?
> >>
> >> Thanks for your help
> >>
> >> Davide
> >
>
>
>
> --
> Matthias Wessendorf
>
> further stuff:
> blog: http://matthiaswessendorf.wordpress.com/
> sessions: http://www.slideshare.net/mwessendorf
> mail: matzew-at-apache-dot-org
>
Re: [Trinidad] Form fields moving on submit in IE7
Posted by Matthias Wessendorf <ma...@apache.org>.
I tried in the past, and had problems in reproducing that issue.
let me try this again, perhaps on the weekend.
-M
On Tue, Jun 10, 2008 at 2:40 PM, Richard Yee <ri...@gmail.com> wrote:
> Davide,
> I think this is the same as TRINIDAD-992 in Jira.
>
> -Richard
>
>
> On 6/10/08, Davide Bonicelli <da...@gmail.com> wrote:
>>
>> Hi all,
>> I've a problem with an application I'm developing in Trinidad (version
>> 1.0.7) when I access it with IE7.
>> When I submit a page containing a form with client side validation, the
>> fields in the form move out of position while the action is executed.
>> The page works perfectly, but it looks pretty ugly when the fields move.
>>
>> It looks as if space is added to the page for the error messages that
>> would be displayed during client side validation under the form fields, even
>> if there are no errors and this cause the fields to "slide" down.
>> The same problem is present in a page where I have a table with "Previous"
>> and "Next" enabled. If I click "Next", the fields of the form I've at the
>> top of the page move out of position and stay in the wrong position until
>> the page is reloaded.
>> This problem is not present in FF2.
>>
>> Here are two examples of code where I have this problem:
>>
>> [CODE]
>>
>> //example 1
>>
>> <
>>
>> tr:panelFormLayout rows="2">
>>
>> <tr:inputText value="#{incomingCallCaseSearch.lastName}" label="Last
>> Name:"
>>
>> columns="20" id="inputLastnameId" />
>>
>> <tr:inputText value="#{incomingCallCaseSearch.caseNumber}" label="Case
>> Number:" columns="20"
>>
>> id="inputCaseNumId" maximumLength="9" />
>>
>> <tr:inputText value="#{incomingCallCaseSearch.firstName}" columns="20"
>> label="First Name:"
>>
>> id="inputFirstnameId" />
>>
>> <tr:panelLabelAndMessage label="SSN:" id="labelMessagePanelID">
>>
>> <tr:panelHorizontalLayout id="horizontalPanelID">
>>
>> <tr:inputText value="#{incomingCallCaseSearch.ssnComp1}" columns="2"
>> id="INCOMINGinputSSN1Id"
>>
>> inlineStyle="margin-left: -8px" maximumLength="3"
>>
>> onkeyup="autoTab(this, 3, 'INCOMINGinputSSN2Id', event);"/>
>>
>> <tr:inputText value="#{incomingCallCaseSearch.ssnComp2}" columns="1"
>> id="INCOMINGinputSSN2Id"
>>
>> maximumLength="2"
>>
>> onkeyup="autoTab(this, 2, 'INCOMINGinputSSN3Id', event);"/>
>>
>> <tr:inputText value="#{incomingCallCaseSearch.ssnComp3}" columns="3"
>> id="INCOMINGinputSSN3Id"
>>
>> maximumLength="4" />
>>
>> </tr:panelHorizontalLayout>
>>
>> </tr:panelLabelAndMessage>
>>
>> </tr:panelFormLayout>
>>
>> <
>>
>> div style="height: 5px" />
>>
>> <div style="align: center; margin-left: 370px"><tr:panelButtonBar>
>>
>> <tr:commandButton id="searchButton" text="Search"
>>
>> action="#{incomingCallCaseSearch.search}"
>>
>> onclick="return disableSearchOnClick();"/>
>>
>> <tr:resetButton text="Reset" id="resetButtonID"/>
>>
>> </tr:panelButtonBar></div>
>>
>>
>>
>> //example 2
>>
>> <
>>
>> tr:panelFormLayout rows="3">
>>
>> <tr:inputText value="#{login.username}"
>>
>> label="Username" required="true" columns="15"
>>
>> maximumLength="255" id="inputUsernameId">
>>
>> </tr:inputText>
>>
>> <tr:inputText value="#{login.password}"
>>
>> label="Password" required="true" columns="15"
>>
>> maximumLength="255" secret="true" id="inputPasswordId" >
>>
>> </tr:inputText>
>>
>> <tr:selectBooleanCheckbox label="Log only into local system?"
>>
>> value="#{login.loginLocally}" id="inputLoginLocallyId" />
>>
>> </tr:panelFormLayout>
>>
>> <tr:panelHorizontalLayout inlineStyle="margin-left: 235px">
>>
>> <tr:commandButton text="Login" id="loginButtonId" action="#{login.login}"
>>
>> blocking="true" inlineStyle="width: 60px; margin-left: 2px"
>>
>> onclick="return disableLoginOnClick();"/>
>>
>> </tr:panelHorizontalLayout>
>>
>> [/CODE]
>>
>> Any idea on how to solve this problem?
>>
>> Thanks for your help
>>
>> Davide
>
--
Matthias Wessendorf
further stuff:
blog: http://matthiaswessendorf.wordpress.com/
sessions: http://www.slideshare.net/mwessendorf
mail: matzew-at-apache-dot-org
Re: [Trinidad] Form fields moving on submit in IE7
Posted by Richard Yee <ri...@gmail.com>.
Davide,
I think this is the same as
TRINIDAD-992<https://issues.apache.org/jira/browse/TRINIDAD-992>in
Jira.
-Richard
On 6/10/08, Davide Bonicelli <da...@gmail.com> wrote:
>
> Hi all,
> I've a problem with an application I'm developing in Trinidad (version
> 1.0.7) when I access it with IE7.
> When I submit a page containing a form with client side validation, the
> fields in the form move out of position while the action is executed.
> The page works perfectly, but it looks pretty ugly when the fields move.
>
> It looks as if space is added to the page for the error messages that would
> be displayed during client side validation under the form fields, even if
> there are no errors and this cause the fields to "slide" down.
> The same problem is present in a page where I have a table with "Previous"
> and "Next" enabled. If I click "Next", the fields of the form I've at the
> top of the page move out of position and stay in the wrong position until
> the page is reloaded.
> This problem is not present in FF2.
>
> Here are two examples of code where I have this problem:
>
> [CODE]
>
> //example 1
>
> <
> tr:panelFormLayout rows="2">
>
> <tr:inputText value="#{incomingCallCaseSearch.lastName}" label="Last
> Name:"
>
> columns="20" id="inputLastnameId" />
>
> <tr:inputText value="#{incomingCallCaseSearch.caseNumber}" label="Case
> Number:" columns="20"
>
> id="inputCaseNumId" maximumLength="9" />
>
> <tr:inputText value="#{incomingCallCaseSearch.firstName}" columns="20"
> label="First Name:"
>
> id="inputFirstnameId" />
>
> <tr:panelLabelAndMessage label="SSN:" id="labelMessagePanelID">
>
> <tr:panelHorizontalLayout id="horizontalPanelID">
>
> <tr:inputText value="#{incomingCallCaseSearch.ssnComp1}" columns="2" id="INCOMINGinputSSN1Id"
>
>
> inlineStyle="margin-left: -8px" maximumLength="3"
>
> onkeyup="autoTab(this, 3, 'INCOMINGinputSSN2Id', event);"/>
>
> <tr:inputText value="#{incomingCallCaseSearch.ssnComp2}" columns="1" id="INCOMINGinputSSN2Id"
>
>
> maximumLength="2"
>
> onkeyup="autoTab(this, 2, 'INCOMINGinputSSN3Id', event);"/>
>
> <tr:inputText value="#{incomingCallCaseSearch.ssnComp3}" columns="3" id="INCOMINGinputSSN3Id"
>
>
> maximumLength="4" />
>
> </tr:panelHorizontalLayout>
>
> </tr:panelLabelAndMessage>
>
> </tr:panelFormLayout>
>
> <
> div style="height: 5px" />
>
> <div style="align: center; margin-left: 370px"><tr:panelButtonBar>
>
> <tr:commandButton id="searchButton" text="Search"
>
> action="#{incomingCallCaseSearch.search}"
>
> onclick="return disableSearchOnClick();"/>
>
> <tr:resetButton text="Reset" id="resetButtonID"/>
>
> </tr:panelButtonBar></div>
>
>
>
> //example 2
>
> <
> tr:panelFormLayout rows="3">
>
> <tr:inputText value="#{login.username}"
>
> label="Username" required="true" columns="15"
>
> maximumLength="255" id="inputUsernameId">
>
> </tr:inputText>
>
> <tr:inputText value="#{login.password}"
>
> label="Password" required="true" columns="15"
>
> maximumLength="255" secret="true" id="inputPasswordId" >
>
> </tr:inputText>
>
> <tr:selectBooleanCheckbox label="Log only into local system?"
>
> value="#{login.loginLocally}" id="inputLoginLocallyId" />
>
> </tr:panelFormLayout>
>
> <tr:panelHorizontalLayout inlineStyle="margin-left: 235px">
>
> <tr:commandButton text="Login" id="loginButtonId" action="#{login.login}"
>
> blocking="true" inlineStyle="width: 60px; margin-left: 2px"
>
> onclick="return disableLoginOnClick();"/>
>
> </tr:panelHorizontalLayout>
>
> [/CODE]
>
> Any idea on how to solve this problem?
>
> Thanks for your help
>
> Davide
>