1. Home
  2. Forum
  3. Blazor
  4. How to customize height and border of TextBox

How to customize height and border of TextBox

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

3 Replies
GG Gopi Govindasamy Syncfusion Team 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. 


PB Peter Benedix September 18, 2019 06:04 AM UTC

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

GG Gopi Govindasamy Syncfusion Team 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. 
 


Loader.
Up arrow icon