customized labels in form are not aligned as expected anymore
Article ID: 130749
Updated On:
Products
CA Service Catalog
CA Service Management - Asset Portfolio Management
CA Service Management - Service Desk Manager
Issue/Introduction
When placing a label component one after another, whether in column or out, they collide (first displays correctly, second appears stacked on top of and to right of the first label ) .
Cause
In customer designed form , they used to use the custom label html ( put into the label element's label text attribute ) , and in that html, it is using "align" property of table element to align it . For example :
<table align="left" class="page-button-container" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="sprite-pagebutton-start"></td>
<td class="sprite-pagebutton-center">
<input name="queryUserButton" alt="Query User" title="Query UCN" value="Query User" onmouseover="javascript:onbtnmouseover(this)" onmouseout="javascript:onbtnmouseout(this)" id="resetFieldsButton" onmousedown="javascript:onbtnmousepress(this)" onmouseup="javascript:onbtnmouseover(this)" class="buttons" type="button" onclick="ca_fd.js.queryUser();"></td>
<td class="sprite-pagebutton-end"></td>
</tr>
</tbody>
</table>
It is used to work well in catalog 14.1 in the past . However , it doesn't work or align as expected anymore .
The reason for it is that : this "align" property is deprecated in HTML5. and we have to use CSS if we need any alignments.
Here there is no need for this align property at all since 17.2 already have it aligned to the left by default .
<table align="left" class="page-button-container" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="sprite-pagebutton-start"></td>
<td class="sprite-pagebutton-center">
<input name="queryUserButton" alt="Query User" title="Query UCN" value="Query User" onmouseover="javascript:onbtnmouseover(this)" onmouseout="javascript:onbtnmouseout(this)" id="resetFieldsButton" onmousedown="javascript:onbtnmousepress(this)" onmouseup="javascript:onbtnmouseover(this)" class="buttons" type="button" onclick="ca_fd.js.queryUser();"></td>
<td class="sprite-pagebutton-end"></td>
</tr>
</tbody>
</table>
It is used to work well in catalog 14.1 in the past . However , it doesn't work or align as expected anymore .
The reason for it is that : this "align" property is deprecated in HTML5. and we have to use CSS if we need any alignments.
Here there is no need for this align property at all since 17.2 already have it aligned to the left by default .
Environment
ITSM service catalog 17.1 , 17.2
Resolution
please remove align="left" for ALL the labels in the html which are put into label text's attribute .
In other words , for example here ,
change original :
<table align="left" class="page-button-container" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="sprite-pagebutton-start"></td>
<td class="sprite-pagebutton-center">
<input name="queryUserButton" alt="Query User" title="Query UCN" value="Query User" onmouseover="javascript:onbtnmouseover(this)" onmouseout="javascript:onbtnmouseout(this)" id="resetFieldsButton" onmousedown="javascript:onbtnmousepress(this)" onmouseup="javascript:onbtnmouseover(this)" class="buttons" type="button" onclick="ca_fd.js.queryUser();"></td>
<td class="sprite-pagebutton-end"></td>
</tr>
</tbody>
</table>
to :
<table class="page-button-container" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="sprite-pagebutton-start"></td>
<td class="sprite-pagebutton-center">
<input name="queryUserButton" alt="Query User" title="Query UCN" value="Query User" onmouseover="javascript:onbtnmouseover(this)" onmouseout="javascript:onbtnmouseout(this)" id="resetFieldsButton" onmousedown="javascript:onbtnmousepress(this)" onmouseup="javascript:onbtnmouseover(this)" class="buttons" type="button" onclick="ca_fd.js.queryUser();"></td>
<td class="sprite-pagebutton-end"></td>
</tr>
</tbody>
</table>
In other words , for example here ,
change original :
<table align="left" class="page-button-container" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="sprite-pagebutton-start"></td>
<td class="sprite-pagebutton-center">
<input name="queryUserButton" alt="Query User" title="Query UCN" value="Query User" onmouseover="javascript:onbtnmouseover(this)" onmouseout="javascript:onbtnmouseout(this)" id="resetFieldsButton" onmousedown="javascript:onbtnmousepress(this)" onmouseup="javascript:onbtnmouseover(this)" class="buttons" type="button" onclick="ca_fd.js.queryUser();"></td>
<td class="sprite-pagebutton-end"></td>
</tr>
</tbody>
</table>
to :
<table class="page-button-container" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="sprite-pagebutton-start"></td>
<td class="sprite-pagebutton-center">
<input name="queryUserButton" alt="Query User" title="Query UCN" value="Query User" onmouseover="javascript:onbtnmouseover(this)" onmouseout="javascript:onbtnmouseout(this)" id="resetFieldsButton" onmousedown="javascript:onbtnmousepress(this)" onmouseup="javascript:onbtnmouseover(this)" class="buttons" type="button" onclick="ca_fd.js.queryUser();"></td>
<td class="sprite-pagebutton-end"></td>
</tr>
</tbody>
</table>
Feedback
Powered by
