customized labels in form are not aligned as expected anymore

Article Id: 130749
Status: Published
Updated On: 10-04-2019 11:05
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 .  
 

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>