After adding a clear button inside the input box in Angular, I am facing an issue where the text in the input box is being overlapped and not fully visible. Below you will find detailed information on this problem.
HTML Code
<ng-template pTemplate="input">
<input pInputText type="text" class="col-input-grid-100" >
<span class="mar-left">
<button (click)="clearmail1(ri)" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
<i class="pi pi-times"></i>
</button>
</span>
</ng-template>
CSS content
.col-input-grid-100{
width: 135%;
margin-left: -10px;
}
.mar-left{
margin-left:-29px;
}
Current Output: Text in input box is [email protected].
https://i.sstatic.net/SpXjX.png
https://i.sstatic.net/1mLVy.png
In the image above, it can be seen that the text "com" is not clearly visible. I have tried various solutions but none have worked. Any assistance in resolving this issue would be greatly appreciated.
Note:
1. I want to display the cross button only inside the input box
2. Bootstrap library is not being used.