customized labels in form are not aligned as expected anymore

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>