简体   繁体   中英

Not able to see entire text when embeded clear button in inputbox

In Angular, I have added clear button inside input box but after adding it I am not able to see entire text in input box as it is being overlapped. Please find detailed information below.

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 test3@test.com.

在此处输入图像描述

在此处输入图像描述

As you can see in above image "com" is not visible clearly. I tried multiple ways but things didnt work. Kindly help me to resolve this issue.

Note:
1. I want to show cross button inside input box only
2. I am not using bootstrap library.

I tried with below code and it worked for me.

<span class="p-input-icon-right">
    <i class="pi pi-times" (click)="clearmail1(ri)" style="margin-right: -16px;"></i>
    <input id="email1" class="col-input-grid-100" type="text" pInputText >
  </span>

Output

在此处输入图像描述

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM