skip to Main Content

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>();

    }

2

Answers


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