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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add float label when textbox is readOnly

Thread ID:

Created:

Updated:

Platform:

Replies:

145933 Jul 15,2019 06:04 AM UTC Jul 17,2019 08:44 AM UTC Blazor 3
loading
Tags: TextBox
Hugo Zhao
Asked On July 15, 2019 06:04 AM UTC

v17.2.29-beta

The code below, but label not float when lose focus.  Thanks

<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 e-disabled">
<div class="e-float-input e-input-group">
<input class="e-input" required="" value="some value" type="text" readOnly>
<span class="e-float-line"></span>
<label class="e-float-text">Phone</label>

</div>
</div>
</div>

Berly Christopher [Syncfusion]
Replied On July 16, 2019 07:23 AM UTC

Hi Hugo,   
  
 
Greetings from Syncfusion Support. 
  
 
We did not provide the support for the CSS Component in Blazor. However, we suggest you use our Syncfusion Blazor Textbox instead of the CSS component. We prepared the sample with FloatLabelType and enabled ReadOnly Property. Please find the code snippet below, 
  
 
[index.razor] 
  
<EjsTextBox Value="Name" Placeholder="First Name" FloatLabelType="@FloatLabelType.Auto" Readonly="true"></EjsTextBox> 
 
  
Please find the UG Documentation Link for FloatLabelType, 
 
 
  
Please find the Sample below, 
 
 
  
Regards, 
Berly B.C 


Hugo Zhao
Replied On July 16, 2019 11:27 AM UTC

Thanks Berly.

I tried  Syncfusion Blazor Textbox at first, but when the bind value like Phone  in code below, the displayed value is incomplete when use EjsTextBox. 


@using Newtonsoft.Json
@using Syncfusion.EJ2.Blazor.Inputs;

<EjsListView ID="list"
DataSource="@ListData"
EnableVirtualization="true"
Height="300"
Width="300"
Selected="@onSelect">
<ListViewFieldSettings Id="Id" Text="Text"></ListViewFieldSettings>
</EjsListView>
<div class="row">
<div class="col-xs-4 col-sm-4 col-lg-4 col-md-4 e-disabled">
<EjsTextBox Value="@selectData?.Id" Placeholder="Id" FloatLabelType="@FloatLabelType.Auto" Readonly="true"></EjsTextBox>
</div>
<div class="col-xs-4 col-sm-4 col-lg-4 col-md-4 e-disabled">
<EjsTextBox Value="@selectData?.Text" Placeholder="Text" FloatLabelType="@FloatLabelType.Auto" Readonly="true"></EjsTextBox>
</div>
<div class="col-xs-4 col-sm-4 col-lg-4 col-md-4 e-disabled">
<EjsTextBox Value="@selectData?.Phone" Placeholder="Phone" FloatLabelType="@FloatLabelType.Auto" Readonly="true" Type="text"></EjsTextBox>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-lg-6 col-md-6 e-disabled">
<div class="e-float-input e-input-group">
<input class="e-input" required="" value="@selectData?.Phone" type="text" readOnly>
<span class="e-float-line"></span>
<label class="e-float-text">Phone</label>
</div>
</div>
</div>
@functions{
List<DataModel> ListData = new List<DataModel>();
DataModel selectData;
void onSelect(Syncfusion.EJ2.Blazor.Lists.SelectEventArgs args)
{
selectData = JsonConvert.DeserializeObject<DataModel>(args.Data.ToString());
this.StateHasChanged();
}
protected override void OnInit()
{
base.OnInit();
ListData.Add(new DataModel { Text = "Nancy", Id = "1" , Phone = "1578954"});
ListData.Add(new DataModel { Text = "Andrew", Id = "2", Phone = "23-45-557" });
ListData.Add(new DataModel { Text = "Janet", Id = "3", Phone = "35-45-557" });
ListData.Add(new DataModel { Text = "Margaret", Id = "4" , Phone = "0512-45-557"});
ListData.Add(new DataModel { Text = "Steven", Id = "5", Phone = "14-AB-557" });
ListData.Add(new DataModel { Text = "Laura", Id = "6" , Phone = "013-45-557"});
ListData.Add(new DataModel { Text = "Robert", Id = "7" , Phone = "0556-45-557"});
ListData.Add(new DataModel { Text = "Michael", Id = "8" , Phone = "04-45-557"});
ListData.Add(new DataModel { Text = "Albert", Id = "9" , Phone = "021-45-557"});
ListData.Add(new DataModel { Text = "Nolan", Id = "10" , Phone = "031-557"});
for (int i = 10; i < 1000; i++)
{
int index = new Random().Next(0, 10);
ListData.Add(new DataModel
{
Text = ListData[index].GetType().GetProperty("Text").GetValue(ListData[index], null).ToString(),
Id = i.ToString(),
Phone = ListData[index].GetType().GetProperty("Phone").GetValue(ListData[index], null).ToString()
});
}
}
class DataModel
{
public string Id { get; set; }
public string Text { get; set; }
public string Phone {get; set;}
}
}

Berly Christopher [Syncfusion]
Replied On July 17, 2019 08:44 AM UTC

Hi Hugo,   
  
 
In the product version V17.2.0.29-beta, we can reproduce the reported problem ("bind value like Phone in code below, the displayed value is incomplete when using EjsTextBox"). However, in the latest nuget package version V17.2.0.34, we have resolved the reported problem. We suggest you to use the nuget version and script file version below to get rid of the reported issue. 
 
  
Kindly replace the script files in your [ Host.cshtml ] file below, 
 
[Host.cshtml] 
        <script src="https://cdn.syncfusion.com/ej2/17.2.34/dist/ej2.min.js"></script> 

  
Please find the latest nuget below, 


  
We have prepared a sample with your code snippet. 


  
Regards, 
Berly B.C 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon