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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize height and border of TextBox

Thread ID:

Created:

Updated:

Platform:

Replies:

147507 Sep 13,2019 07:23 AM UTC Sep 18,2019 12:45 PM UTC Blazor 3
loading
Tags: TextBox
Peter Benedix
Asked On September 13, 2019 07:23 AM UTC

Hello,

I try to customize the height and the border of a TextBox. When I'm using the multiple flag, I have only two lines but I need more. I also was not able to define a border around the TextBox too.

Thanks for helping

Gopi Govindasamy [Syncfusion]
Replied On September 16, 2019 07:15 AM UTC

Hi Peter,  

Greetings from Syncfusion support.  

We have validated your requirement and customizing the height and border in TextBox. We have provided CssClass property to customize the css and override the default styles to set the height. By default, Material theme border show bottom of the textbox. Based your requirement for border around textbox, we have provided outline textbox for show the border around textbox. You can set the “e-outline” class into CssClass property. We have prepared sample for change the textbox height with outline textbox. Please find the code snippet for your reference.  

@using Syncfusion.EJ2.Blazor.Inputs 
 
<EjsTextBox CssClass="e-custom-height e-outline" Placeholder="Enter the Name"></EjsTextBox> 
 
<style> 
    .e-custom-height { 
        height: 50px; 
    } 
</style> 

Based on your requirement show the text two line. We suggest to use “Multiline” textbox set to rows in HtmlAttributes property. Please find the code snippet for your reference.  

<div>MultiLine TextBox</div> 
 
<EjsTextBox Multiline="true" CssClass="e-outline" Placeholder="Enter the Name" HtmlAttributes="@htmlAttribute"></EjsTextBox> 
 
@code{ 
 
private Dictionary<string, object> htmlAttribute = new Dictionary<string, object>() 
{ 
        {"rows", "2" } 
    }; 
 
} 

Note: By default, material theme border show bottom only. If you want to show the border around textbox with bootstrap theme, please refer bootstrap css in your application.  
 

 
To know more about TextBox component, please refer the below documentation link.  

 
Regards, 
Gopi G. 


Peter Benedix
Replied On September 18, 2019 06:04 AM UTC

Thanks, but this demo not works with FloatLabelType="@FloatLabelType.Auto" - is this another bug again?

Gopi Govindasamy [Syncfusion]
Replied On September 18, 2019 12:45 PM UTC

Hi Peter,  
  
Thanks for your update.  
  
We have confirmed this as bug in our end. We will fix the issue and fix will be include on our upcoming release scheduled on 24th September 2019. You can track the status of this issue using below feedback portal link. 
  
  
Until, we have provided solution to resolve the reported issue in your application level like following code snippet. We have prepared sample and included the css for outline textbox with FlatingLabelType. 
  
@using Syncfusion.EJ2.Blazor.Inputs 
  
<EjsTextBox CssClass="e-custom-height e-outline" FloatLabelType="@FloatLabelType.Auto" Placeholder="Enter the Name"></EjsTextBox> 
  
<div>MultiLine TextBox</div> 
  
<EjsTextBox Multiline="true" CssClass="e-outline" Placeholder="Enter the Name" FloatLabelType="@FloatLabelType.Auto" HtmlAttributes="@htmlAttribute"></EjsTextBox> 
  
  
<style> 
    .e-custom-height { 
        height: 50px; 
    } 
  
    .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input).e-multi-line-input textarea:focus ~ label.e-float-text.e-label-top, 
    .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input).e-multi-line-input textarea:focus ~ label.e-float-text.e-label-bottom { 
        line-height: 16.8px; 
        transition: color .2s, font-size .2s, line-height .2s; 
    } 
</style> 
  
@code{ 
  
    private Dictionary<string, object> htmlAttribute = new Dictionary<string, object>() 
{ 
        {"rows", "2" } 
    }; 
  
} 
  
Gopi G. 
 


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