Set Height On MultiLine Textbox in MVC Grid with InLine Editing

[John]

Is there a way to set the height on a MultiLine Textbox in the MVC Grid?  It seems that IE 11 is showing a little more than a row but Chrome and FireFox show multiple rows when editing a row.  I have the [DataType(DataType.MultilineText)] attribute set on the property I'm editing in my View Model.  

ViewModel

[DataType(DataType.MultilineText)]
public string Comments { get; set; }

Grid column definition

columns.Bound(c => c.Comments).Width(400);

See attached for screenshots.  I need this to be consistent so is there a way to get the height of the editor textbox the same?

 

 

 

[Dimiter Topalov]

Hi John,

The issue is caused by the fact that different browsers render the <textarea> elements differently, and this can be handled by setting explicit height to the corresponding elements.

The textbox, created automatically as an editor for the corresponding field, will receive the field name as an ID. You can add a rule for the given CSS ID selector, e.g.:

<style>
    #ProductName {
        height: 100px;
    }
</style>

// Grid configuration
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(120);
        columns.Bound(p => p.UnitsInStock).Width(120);
        columns.Bound(p => p.Discontinued).Width(120);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })...

In the discussed scenario, this will be the Comments field, so the CSS should look like:

<style>
    #Comments {
        height: 100px;
    }
</style>

I hope this helps.

Regards,
Dimiter Topalov
Telerik

[John]

Works perfect.  Thanks!