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:
this.FloatTextBoxSearchObj.AddIconAsync("prepand","e-search");
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
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?
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> |
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
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.
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
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