How to customize height and border of TextBox

[Peter Benedix]

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]

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.  

 

Style: https://cdn.syncfusion.com/ej2/17.2.50/bootstrap.css  

Sample Link: https://www.syncfusion.com/downloads/support/forum/147507/ze/BlazorApp1-1839314988  

 

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

UG Link: https://ej2.syncfusion.com/blazor/documentation/textbox/multiline/  

 

Regards, 

Gopi G. 

[Peter Benedix]

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

[Gopi Govindasamy]

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 24^th September 2019. You can track the status of this issue using below feedback portal link. 

  

https://www.syncfusion.com/feedback/8946  

  

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" } 

    }; 

  

} 

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/147507/ze/BlazorApp1172222245

Regards, 

Gopi G.