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
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
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:
You have
.pl-2
class on the input. Is that overpowering yourpadding-left: 30px;
?If you’re using tailwind I suggest only using tailwindcss, for example something like this: