I am facing a challenge with setting the width of a textbox dynamically based on the value assigned to the controls linked to it during data retrieval from the database, typically during initialization.
After the page has loaded and all values are assigned to the bound form control, I want the textbox to adjust its width accordingly. However, I have been unable to achieve this so far. Below is the code snippet I am using:
HTML
<td formArrayName="entityAttributeInfo" *ngFor="let item of paramTypes.get('entityAttributeInfo')['controls']; let ii = index;">
<div [formGroupName]="ii" class="tabledataEquipmentNameInfo">
<table *ngIf="item.get('uom').value!=''" style="width:100%">
<tr *ngIf="item.get('uom').value!=''">
<td style="width:60%;">
<input formControlName="value" class="form-control" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px;">
</td>
//this td element I want to assign width based on value retrieved from item.get('uom').value
<td style="width:40%;">
<input style="border-left: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;" formControlName="uom" class="form-control" [attr.disabled]="true" />
</td>
</tr>
</table>
</div>
</td>
I have attempted to handle the issue on the HTML side by using min-width property, but it did not work as expected. The current HTML output can be seen in the screenshot provided in the link below.
There appears to be an extra gap in the disabled textbox.
https://i.sstatic.net/Tztla.png
It should be noted that the value assigned to the textbox can vary greatly in size. Therefore, I need a solution that can adjust the width dynamically. Despite looking through various online articles, I have not been able to find a satisfactory answer.