Within my HTML code, I have implemented 2 tables using the PrimeFaces UI Framework for Java. Each table contains a button, and I am seeking a way to ensure that both buttons always appear on the same line.
To achieve this alignment, I applied a style with margin-top:100px; to Button 1, which successfully positioned it correctly:
https://i.sstatic.net/Vr8g2.png
However, when an input error occurs within Textbox 1, the display is disrupted:
https://i.sstatic.net/gYNTo.png
The division containing Button 1 is structured as follows:
<div class="mail_sendBtn">
<h:commandButton class="mail_sendBtn doBlock"
id="btn_send"
action="#{preEntryAccountMBean.submit}"
value="E-mail"
type="submit"
onclick = "storeMail()" />
<p:defaultCommand target="btn_send" />
Additionally, the styling specifications for Button 1 are outlined below:
input.mail_sendBtn {
width: 300px;
height: 59px;
border-radius: 5px;
border-width: 0;
background-color: #ffa800;
cursor: pointer;
color: #FFFFFF;
font-size: 20px;
margin-top: 102px;
}
An error message related to the issue can be found in the following paragraph:
<tr>
<td colspan="2">
<h:message id="mailAddressInputMessage"
for="preEntryMailAddressInput"
class="error_message"/>
</td>
</tr>