Question 174073 in Html Question posted in
Some basic documentation can be found here.

Html – Why my input not showing correctly the icon and the text?

Im doing a blazor component that is needs to be formed with an icon(im using from awesome-icons) and text. The representation of the input is as follows: it consists of an icon and a text that should go to the right of the icon. Im using tailwind css and I don’t know why when Im trying to set the padding it just doesn’t mind. I I realize that the error will be something easy to fix but I can not see where im doing the mistake.

Actual output

Actual representation

The expected output

The expected output

InputWithIcon.razor

.input-icon {
  position: relative;
}

.input-icon input {
  padding-left: 30px;
}

.input-icon i {
  position: absolute;
  left: 20px;
  top: calc(50% - 0.5em);
}
<div class="input-icon">
  <i class="fa fa-envelope"></i>
  <input type="text" id="@id" @bind="Value" class="border rounded pl-2" />
</div>

InputWithIcon.razor.cs

public partial class InputWithIcon
    {
        [Parameter] 
        public string IconClass { get; set; }

        [Parameter] 
        public string Value{ get; set; }

        [Parameter]

        public string id { get; set; }

        [Parameter(CaptureUnmatchedValues = true)] 
        public Dictionary<string, object> AdditionalAttributes { get; set; } = new Dictionary<string, object>();

    }
Tags:

2

Answers


  1. 0

    One alternative which avoids absolute positioning is to use your .icon-input wrapper div as the input box and style that when the input element inside it gets focus. There’s a handy pseudo selector called :focus-within that will do this for you.

    See below:

    .input-icon {
  border: 1px solid black;
  padding: 0.125rem;
  width: fit-content;
}

.input-icon:focus-within {
  outline: 2px solid #2491eb;
}

.input-icon input {
  outline: transparent;
  border:none;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="input-icon">
    <i class="fa-solid fa-user"></i>
    <input type="text" id="@id" @bind="Value" >
</div>
    Login or Signup to reply.
  2. 0

    You have .pl-2 class on the input. Is that overpowering your padding-left: 30px; ?

    If you’re using tailwind I suggest only using tailwindcss, for example something like this:

    <div class="relative mb-2 flex items-center">
  <i class="@IconClass absolute left-4 mb-0 mt-auto"></i>
  <input
    id="@id"
    type="text"
    @bind="Value"
    class="h-12 rounded border py-2 pl-8" 
    placeholder="Lorem Ipsum"
  />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search