We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

TextBox with two icons but with InputText readonly

hello,


I want to use textbox component with two icons as below.

Is it possible that the inputtext field is read-only but on the other hand that the two icons remain clickable?

Basically I want normal behavior but disallow keyboard input in the inputtext field.




thx


PS: there is an error in the following page: 

https://blazor.syncfusion.com/documentation/textbox/groups#with-icon-and-floating-label:~:text=icon%20and%20floating-,label,-Create%20a%20TextBox

this.FloatTextBoxSearchObj.AddIconAsync("prepand","e-search");



7 Replies

SP Sureshkumar P Syncfusion Team January 3, 2023 11:04 AM UTC

Hi Geoffrey,

We suggest you use the append and prepend icon to add both icons and use the readonly property to restrict the component editable.

Find the code example here:

@using Syncfusion.Blazor.Inputs

 

<div id="wrapper">

    <label>TextBox with icon</label>

    <SfTextBox @ref="TextBoxDateObj" Readonly="true" Placeholder="Enter date" Created="@OnCreateDate"></SfTextBox>

 

  

</div>

 

@code{

    SfTextBox TextBoxDateObj;

    SfTextBox TextBoxSearchObj;

    SfTextBox FloatTextBoxDateObj;

    SfTextBox FloatTextBoxSearchObj;

    public void OnCreateDate()

    {

        // Event creation with event handler

        var Click = EventCallback.Factory.Create<MouseEventArgs>(this, DateClick);

        this.TextBoxDateObj.AddIconAsync("append", "e-date-icon", new Dictionary<string, object>() { { "onclick", Click } });

        this.TextBoxDateObj.AddIconAsync("prepend", "e-date-icon", new Dictionary<string, object>() { { "onclick", Click } });

    }

 

    public void DateClick()

    {

        // Icon Click event triggered

    }

}


Find the sample in the attachment:

Also, thanks for your valuable suggestion regarding our documentation. We will resolve the reported issue on our documentation and publish any one of our upcoming releases.

Regards,

Sureshkumar P


Attachment: Textbox_408381a0.zip


GE Geoffrey January 3, 2023 11:18 AM UTC

Hello,

Indeed I had found this solution and it seems to correspond to my expectation, only problem is that graphically the right button seems disabled.


Can we do something?





SP Sureshkumar P Syncfusion Team January 4, 2023 12:30 PM UTC

Geoffrey, you can achieve your requirement by using the below style changes.

Find the code example here:

<div id="wrapper">

    <label>TextBox with icon</label>

    <SfTextBox @ref="TextBoxDateObj" Readonly="true" Placeholder="Enter date" Created="@OnCreateDate"></SfTextBox>

 

  

</div>

 

@code{

    SfTextBox TextBoxDateObj;

    SfTextBox TextBoxSearchObj;

    SfTextBox FloatTextBoxDateObj;

    SfTextBox FloatTextBoxSearchObj;

    public void OnCreateDate()

    {

        // Event creation with event handler

        var Click = EventCallback.Factory.Create<MouseEventArgs>(this, DateClick);

        this.TextBoxDateObj.AddIconAsync("append", "e-date-icon e-disabled", new Dictionary<string, object>() { { "onclick", Click } });

        this.TextBoxDateObj.AddIconAsync("prepend", "e-date-icon", new Dictionary<string, object>() { { "onclick", Click } });

    }

 

    public void DateClick()

    {

        // Icon Click event triggered

    }

}

<style>

    .e-search::before {

        content: '\e993';

        font-family: e-icons;

    }

    #wrapper {

        width: 30%;

    }

 

    .e-date-icon.e-disabled {

        pointer-events: none;

    }

</style>




GE Geoffrey January 4, 2023 12:48 PM UTC

Hello,


It's actually the opposite that I want.


I don't want it disabled but enabled.


In your first solution, the button appears disabled (see my image) when I want it to appear enabled!


thank you



SP Sureshkumar P Syncfusion Team January 5, 2023 12:29 PM UTC

Geoffrey, when we validate the previously attached sample, we cannot replicate the reported issue on our end.

Find the code example here:

@using Syncfusion.Blazor.Inputs

@using Syncfusion.Blazor.DropDowns

 

<div id="wrapper">

    <label>TextBox with icon</label>

    <SfTextBox @ref="TextBoxDateObj" Readonly="true" Placeholder="Enter date" Created="@OnCreateDate"></SfTextBox>

   

  

</div>

 

@code{

    SfTextBox TextBoxDateObj;

    SfTextBox TextBoxSearchObj;

    SfTextBox FloatTextBoxDateObj;

    SfTextBox FloatTextBoxSearchObj;

    public void OnCreateDate()

    {

        // Event creation with event handler

        var Click = EventCallback.Factory.Create<MouseEventArgs>(this, DateClick);

        this.TextBoxDateObj.AddIconAsync("append", "e-date-icon", new Dictionary<string, object>() { { "onclick", Click } });

        this.TextBoxDateObj.AddIconAsync("prepend", "e-date-icon", new Dictionary<string, object>() { { "onclick", Click } });

    }

 

    public void DateClick()

    {

        // Icon Click event triggered

    }

 

 

    public string[] MultiVal { get; set; } = new string[] { };

 

    public class Country

    {

        public string Name { get; set; }

 

        public string Code { get; set; }

    }

 

    List<Country> Countries = new List<Country>

{

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

    };

}

<style>

    .e-search::before {

        content: '\e993';

        font-family: e-icons;

    }

    #wrapper {

        width: 30%;

    }

 

</style>


Find the screenshot here:


If you have overridden any styles or you have added any additional attributes/Properties to the component, please share those details. These details will help us to provide an exact solution as earlier as possible.




GE Geoffrey January 6, 2023 02:54 PM UTC

hi,

As shown in my screen below, we can see that the "magnifying glass" icon has a "disabled" style.



With the dev tools, we can see that BooStrap5 style applies to it:




--> the theme is added in the _Layout.cshtml file :

<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" />


it bothers me to have to overload the rule because it could have impacts elsewhere


thx

Geff



SP Sureshkumar P Syncfusion Team January 9, 2023 10:56 AM UTC

Geoffrey, this is the default behavior of the bootstrap5 theme. If you want to override this behavior, you can use the below CSS override style.

Find the override CSS style:

<div id="wrapper">

 

    <label>TextBox with icon</label>

 

    <SfTextBox @ref="TextBoxDateObj" CssClass="ReadOnlyCustomICon" Readonly="true" Placeholder="Enter date" Created="@OnCreateDate"></SfTextBox>

 

</div>

 

@code {

 

    SfTextBox TextBoxDateObj;

 

    SfTextBox TextBoxSearchObj;

 

    SfTextBox FloatTextBoxDateObj;

 

    SfTextBox FloatTextBoxSearchObj;

 

    public void OnCreateDate()

    {

        // Event creation with event handler

        var Click = EventCallback.Factory.Create<MouseEventArgs>(this, DateClick);

        this.TextBoxDateObj.AddIconAsync("append", "e-search", new Dictionary<string, object>() { { "onclick", Click } });

        this.TextBoxDateObj.AddIconAsync("prepend", "e-date-icon", new Dictionary<string, object>() { { "onclick", Click } });

 

    }

 

    public void DateClick()

    {

        // Icon Click event triggered

    }

}

<style>

    .e-search::before {

        content: '\e754';

        font-family: e-icons;

    }

 

    .ReadOnlyCustomICon.e-input-group .e-input[readonly] ~ span.e-input-group-icon,

    .ReadOnlyCustomICon.e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon,

    .ReadOnlyCustomICon.e-float-input input[readonly] ~ span.e-input-group-icon,

    .ReadOnlyCustomICon.e-float-input.e-control-wrapper input[readonly] ~ span.e-input-group-icon,

    .ReadOnlyCustomICon.e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {

        background:inherit;

    }

 

</style>


To know more about the default bootstrap5 theme behavior, please refer to the documentation link: https://getbootstrap.com/docs/5.0/forms/form-control/#readonly


Loader.
Up arrow icon