Visibility of text compromised when placing transparent button inside input field

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.

Answer №1

I implemented the code snippet below and it successfully solved my issue.

<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>

Here is the resulting output:

https://i.sstatic.net/taXQB.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the node_modules folder to become corrupted when publishing an AspNetCore2 project with Visual Studio?

During the development of my AspNetCore project using Kendo, Angular5, and AspNet Mvc, everything was running smoothly. However, when trying to publish the project, I encountered a strange issue where it breaks. https://i.sstatic.net/2xQ1Q.png I then cam ...

Learn how to incorporate a 'Select All' feature as the primary choice in DevExtreme SelectBox with Angular 15 through Html coding

We are looking to replicate the following basic HTML select in Angular 15 using a dropdown control from DevExpress known as dx-select-box <select ng-model="selectedVal" ng-change="selectedValueChanged()"> <option value=&q ...

How can you switch the default menu in bootstrap 5 to an off-canvas menu?

I'm currently designing a landing page using Bootstrap 5, and I want to replace the default menu with an off-canvas menu that includes a close icon. <!DOCTYPE html> <html lang="en"> <head> … </body> </html> Whi ...

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Currently, I am developing an application using Rails, Vue, and TailwindCss 1.0+ I am facing an issue while creating a dropdown menu for my products. When I click on the dropdown button, the items in the dropdown fly off to the edge of the screen instead ...

Remove the "href" from Zend2 navigation functionality

When using Zend2 navigation from an array passed in Zend\Navigation\Navigation, everything works smoothly if child items are opened on parent item mouse hover. However, undesirable actions occur when they are opened on mouse click, as the user is ...

Exploring the Robot Framework: Strategies for Identifying and Populating Input Text Fields

Link Here is a snippet of my HTML code: <input type="text" placeholder="Search for extensions" class="user-input" style="width: 370px;"> Despite trying to capture the Xpath of the input text field, I am encou ...

Trouble Viewing Images on Website

I am currently dealing with a critical issue in my project. I am using the MVC model and have my CSS stylesheet located in the view folder. In this stylesheet, I have included the following code for the body element: body{ margin-left:250px; backg ...

Display HTML in JavaScript without altering the Document Object Model

Is it possible to style a custom HTML tag called "location" without directly modifying the DOM? For instance, having <location loc-id="14" address="blah" zipcode="14" /> Would it be feasible to render it like this: <div class="location"> ...

What are the specific files I should modify for HTML/CSS in my Ruby application?

My application was initially created with an introduction from: http://guides.rubyonrails.org/getting_started.html I am now looking to add some color and style through CSS. I have located the JavaScript and CSS files, but I am unsure which file is respons ...

Tips for aligning images and text in the center of a row using Bootstrap

I am struggling to center the image along with the text in my code. I attempted to use a container, but it did not have the desired effect. Below is the image: https://i.sstatic.net/fnaj4.png <section id="features"> <!-- <div ...

Displaying the "Ad Blocker Detected" image next to the advertisement

I am attempting to create a feature where if adblock is enabled, an image will display behind the ad banner on my website with the message "Please consider disabling adblock". Unfortunately, it is only showing up as a bordered box. Here is how the box ap ...

Prevent parent from scrolling when hovering over a div in HTML5

Unfortunately, the scrolling attribute is not supported in HTML5. I'm facing an issue where I have an svg inside an iframe within a div, and I need to enable scroll functionality within the div while preventing the page from scrolling at the same time ...

What is the best way to call an Angular component function from a global function, ensuring compatibility with IE11?

Currently, I am facing a challenge while integrating the Mastercard payment gateway api into an Angular-based application. The api requires a callback for success and error handling, which is passed through the data-error and data-success attributes of the ...

What is the best method for automatically closing the modal window?

I implemented a modal window on my website. Within the modal, there is a green button labeled "Visit" which triggers the "Bootstrap Tour". I aim for the modal to automatically close when the tour starts. To access this feature on my site, users need to ...

What could be the reason for my code experiencing issues with fetching data from the database using a prepared statement

This is the PHP code I am using to retrieve data from a database using prepared statements. if ($conn) { //database connected successfully $view_sql = "SELECT * FROM certificate_verify"; $stmt_view = $conn->prepare($view_sql); $stmt_view->execute() ...

Include a proximity button onto the tabs

Currently, I'm diving into learning Bootstrap and one thing I'd like to implement is having an x next to each tab name for easy closing: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

In order to check a checkbox, you need to ensure that the scrolling div has been scrolled to the very

I have a situation where I need to ensure that a user has scrolled to the bottom of a disclaimer before they can acknowledge it by checking a checkbox. Our legal department requires this extra step for compliance reasons. Here is an example of how the mark ...

Adding a button to the right of a text-field input in Vuetify app

I need advice on the best way to use Vuetify in order to display a button to the right of a text-field (attached). I've checked the main site for information but couldn't find anything related to this specific scenario. https://i.sstatic.net/Pp ...

The navigation bar seems to be missing from the page

I am currently working on developing a responsive navigation bar with CSS animation. However, I am encountering some issues when trying to run the code on my laptop. Upon running it, only the checkbox appears while the list of navigation items is displayed ...

Are HTML entities ineffective in innerHTML in javascript?

Take this example: <script type="text/javascript> function showText() { var text = document.getElementById("text-input").value; document.getElementById("display").innerHTML = text; } </script> <?php $text = "<html>some ...