Create Search Box - with Icon and formating.

[Jon Elster]

Hi

I'm trying to create a simple search box with a Icon and SFTextBox. But the formating is off - PlaceHolder 'overwrite' icon. And how do I make the font larger.

Can you tell me what is wrong?  thanks  - See screenshot

     <SfTextBox  @ref="search" Created="@onCreateSearch"  Placeholder="Search Work Request Number" Width="250px" CssClass="e-corner"  ValueChange="OnSearch" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

 

    <style>

        .e-input-group.e-corner {

            border-radius: 5px;

         }

  .e-upload-picture::before {

        content: '\e724';

        font-family: e-icons;

    }

    .bootstrap4 .e-upload-picture::before {

        content: '\e769';

        font-family: e-icons;

        margin-right: 40px;

    }

    </style>

   SfTextBox search;

    public void OnSearch(Syncfusion.Blazor.Inputs.ChangedEventArgs args)

    {

        if (args.Value != null)

        {

            if (String.IsNullOrEmpty(args.Value))

            {

                Work = DataService.Get_Work().GetAwaiter().GetResult();

            }

            else

            {

                Work = Work.Where(w => w.Summary.Contains(args.Value)).ToList();

            }

        }

    }

    public void onCreateSearch()

    {

        this.search.AddIcon("prepend", "e-upload-picture");

    }

Attachment: Capture_51b0124.zip

[Berly Christopher]

Hi Jon, 

  

Greetings from Syncfusion support. 

  

We were able to reproduce the reported issue. As of now, we suggest you to use the below work around solution to resolve the reported issue at your end. 

  

<style> 

    label.e-float-text,  

    .e-corner.e-float-input label.e-float-text,  

    .e-corner.e-float-input.e-control-wrapper label.e-float-text,  

    .e-corner.e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom { 

        padding-left: 34px; 

    } 

</style> 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_addicon834757641  

  

We will validate this issue and update the further details in one business day (26^th October 2020).  

  

Regards, 

Berly B.C 

[Jon Elster]

How do I increase and change the font ?

Thanks again!!!!!!!!!!!!

[Ponmani Murugaiyan]

Hi Jon, 

Thanks for the update. 

We have prepared sample for your required cases “To increase and change the font”. Please find the sample below for your reference. 

/*To increase the font-size and change font-family*/ 

    .e-input-group.e-control-wrapper.e-corner { 

        font-family: serif; 

        font-size: 24px; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_TextBox-21224455  

 

We have considered your reported issue as a bug “Icon and Placeholder overlapped when prepend the icon in TextBox” in our end. The fix will be available in the first patch release after Volume SP1 release, which is expected to be rolled out on November 05, 2020.  

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

Until then we suggest you to use the provided work-around solution to get rid of this issue. 

Regards, 

Ponmani M