Icon in SfTextBox

[Raheel Ahmed Khan Lodhi]

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

[Berly Christopher]

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: 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_addicon_165343-1348167769

 

  

To know more about icon library in Syncfusion. Please refer the below link. 

UG Link: https://blazor.syncfusion.com/documentation/appearance/icons/#bootstrap-4 

 

  

Regards, 

Berly B.C 

[Raheel Ahmed Khan Lodhi]

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

[Berly Christopher]

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: 

 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server-2072378953 

  

Regards, 

Berly B.C 

[Raheel Ahmed Khan Lodhi]

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

[Berly Christopher]

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; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Font_awesome_float_label-1401338500  

  

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. 

Feedback: https://www.syncfusion.com/feedback/19143  

  

Regards, 

Berly B.C 

[Raheel Ahmed Khan Lodhi]

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

[Berly Christopher]

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. 

Feedback: https://www.syncfusion.com/feedback/20532/  

 

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

}; 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/masked_add_icon-1156840949  

Regards, 

Berly B.C