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
