1. Home
  2. Forum
  3. Blazor
  4. Icon in SfTextBox

Icon in SfTextBox

Hello Team,
I tried a lot to place icon in SfTextBox but its just showing an empty box. I am trying to use exact copy paste code available in Demo Source code but its coming like this:
Can you please help me sharing source code of this, it would be a great help/

Thank You

7 Replies 1 reply marked as answer
BC Berly Christopher Syncfusion Team May 11, 2021 08:28 AM UTC

Hi Raheel, 
  
Greetings from Syncfusion support. 
  
We have checked the reported issue. We suggest you to add the “e-upload” instead od “e-upload-picture” and add the corresponding content in the style section to achieve the requested requirement. 
  
<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
        <SfTextBox @ref="upload" Placeholder="Upload Picture" Created="@onCreateUpload"></SfTextBox> 
    </div> 
    </div> 
    @code{ 
        SfTextBox upload; 
 
        public void onCreateUpload() 
        { 
            this.upload.AddIcon("prepend", "e-upload"); 
        } 
    } 
    <style> 
 
        .e-upload:before { 
            content: '\e769'; 
            font-family: "e-icons"; 
        } 
        .e-upload{ 
            width:auto; 
        } 
    </style> 
 
  
Screenshot: 
 
  
  
To know more about icon library in Syncfusion. Please refer the below link. 
 
  
Regards, 
Berly B.C 


RA Raheel Ahmed Khan Lodhi May 15, 2021 11:11 AM UTC


Hello Team,

Thanks for your reply, Can you please supply me with the exact source code of following example. Because I am still confused in dealing with multiple icons for multiple controls in one form. Please help. Thank You

BC Berly Christopher Syncfusion Team May 17, 2021 07:27 AM UTC

Hi Raheel, 
  
We have prepared the sample based on the requested requirement by using the AddIcon method by passing the position as “append” and “prepend”. 
  
 
<div id="container"> 
    <div class="content-wrapper"> 
        <div class="row"> 
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
                <SfTextBox @ref="person" Placeholder="Enter Name" Created="@onPersonCreated"></SfTextBox> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
                <SfTextBox @ref="image" Placeholder="Search images" Created="@OnImageUpload"></SfTextBox> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
                <SfTextBox @ref="url" Placeholder="Type URL" Created="@urlCreated"></SfTextBox> 
            </div> 
        </div> 
        <div class="row"> 
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6"> 
                <SfTextBox @ref="document" Placeholder="Search document" Created="@onDocumentCreated"></SfTextBox> 
            </div> 
        </div> 
    </div> 
</div> 
        @code{ 
            SfTextBox person; 
            SfTextBox image; 
            SfTextBox document; 
            SfTextBox url; 
 
            public void onPersonCreated() 
            { 
                this.person.AddIcon("prepend", "e-input-person"); 
            } 
            public void OnImageUpload() 
            { 
                this.image.AddIcon("append", "e-input-search"); 
                this.url.AddIcon("append", "e-input-search"); 
            } 
            public void urlCreated() 
            { 
                this.url.AddIcon("prepend", "e-input-reload"); 
            } 
            public void onDocumentCreated() 
            { 
                this.document.AddIcon("append", "e-input-search"); 
                this.document.AddIcon("append", "e-input-down"); 
            } 
        }        <style> 
            .e-input-person:before { 
                content: "\e425"; 
                font-family: e-icons; 
            } 
            .e-input-search:before { 
                content: "\ebe6"; 
                font-family: e-icons; 
            } 
            .e-input-reload:before { 
                content: "\e218"; 
                font-family: e-icons; 
            } 
            .e-input-down:before { 
                content: "\e83d"; 
                font-family: e-icons; 
            } 
        </style> 
 
 
  
Screenshot: 
 
  
  
Regards, 
Berly B.C 


RA Raheel Ahmed Khan Lodhi May 20, 2021 08:33 AM UTC

My Code is:
<div class="row">
            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                <SfTextBox @ref="Globals.Facebook" Created="@Globals.onFacebook" Autocomplete="AutoComplete.Off" Placeholder="Facebook Page" FloatLabelType="FloatLabelType.Auto"></SfTextBox>
            </div>
            <div class="col-xs-2 col-sm-6 col-lg-6 col-md-6 search-item">
                <SfTextBox @ref="Globals.Instagram" Created="@Globals.onInstagram" CssClass="text-custom2" Autocomplete="AutoComplete.Off" Placeholder="Instagram Page" FloatLabelType="FloatLabelType.Auto"></SfTextBox>
            </div>
        </div>

       public static void onInstagram()
        {
            Instagram.AddIcon("prepend", "fa fa-instagram");
        }

        public static void onLinkedIn()
        {
            LinkedIn.AddIcon("prepend", "fa fa-linkedin-square");
        }

   .text-custom2 {
        padding-left: 10px;
        padding-right: 10px;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: medium;
        width: auto;
    }

and Output is:




Can you please advise how i can fix placholder overlapping and size of icon also ?
Thank you



BC Berly Christopher Syncfusion Team May 21, 2021 01:12 PM UTC

Hi Raheel, 
  
Thanks for sharing information to us. 
  
We were able to reproduce the reported issue. We can resolve the reported issue with help of overridden the float label style as mentioned below. 
  
    label.e-float-text, 
    .text-custom2.e-float-input label.e-float-text, 
    .text-custom2.e-float-input.e-control-wrapper label.e-float-text, 
    .text-custom2.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { 
        padding-left: 34px; 
    } 
 
  
Also, we have considered the reported issue as improvement in our end. This issue will be resolved in our upcoming Volume 2 Main release which is expected to be rolled out on end of June 2021. We appreciate your patience until then. 
  
Please track the status of this from the below feedback. 
  
Regards, 
Berly B.C 


Marked as answer
RA Raheel Ahmed Khan Lodhi May 21, 2021 03:20 PM UTC

Thanks a lot for your reply. It was extremely helpful and sorted out the issue.

Can you please extend your cooperation and advise how to do the same with SfMaskedText Control (with icon and floating label)

Thank you

BC Berly Christopher Syncfusion Team May 24, 2021 06:52 AM UTC

Hi Raheel, 

Greetings from Syncfusion support. 

We would like to inform you that, Masked TextBox component does not have built-in AddIcon support. We have considered this as a feature at our end and this support will be available in any one of our upcoming releases. Please track the status of this feature from the below feedback. 

 
So, we suggest you to below mentioned solution to achieve the requested requirement in Masked TextBox component. 

@using Syncfusion.Blazor.Inputs 
 
<div class="row"> 
   <div class="col-xs-2 col-sm-6 col-lg-6 col-md-6 search-item"> 
        <h5>Masked TextBox</h5> 
        <SfMaskedTextBox @ref="mask" Created="OnCreate" CssClass="custom" Mask="0000-0000" Placeholder="Enter Phone Number" FloatLabelType="FloatLabelType.Auto"></SfMaskedTextBox> 
    </div> 
</div> 
@code{ 
    SfMaskedTextBox mask; 
    [Inject] 
    protected IJSRuntime JsRuntime { get; set; } 
    public void OnCreate(object args) 
    { 
        JsRuntime.InvokeVoidAsync("OnCreated"); 
    } 
 
} 
<style> 
    span.fa.fa-phone { 
        position: absolute; 
        align-items: center; 
        justify-content: center; 
        line-height: 2; 
        min-width: 28px; 
        text-align: center; 
        font-size: 14px; 
        margin-left: 1px; 
        margin-top: 1px; 
    } 
 
    .custom label.e-float-text { 
        text-indent: 27px; 
    } 
    .custom.e-float-input.e-control-wrapper.e-input-focus input, 
    .custom.e-float-input.e-control-wrapper input { 
        padding-left: 30px; 
    } 
</style> 
[Wwwroot/addIcon.js] 

window.OnCreated = () => {  
    var maskObj = document.getElementsByClassName("custom");  
    // Create the span element for insert phone icon  
    var span = document.createElement("span"); 
    // Add the phone icon class to the span element  
    span.setAttribute("class", "fa fa-phone");  
    maskObj[0].appendChild(span);  
}; 


Regards, 
Berly B.C 


Loader.
Up arrow icon