[FIXED] How do I get input tag text to align to the top?

Issue

I am building a Razor Pages web app and I added the CRUD features to it. On my Create page, there's a form to create entries which uses input tags. One of those fields is for comments so obviously it needs to be larger. So I added a width and height styles to it. However, the text only appears in the middle of the comment field and when the text reaches the end of the field, it doesn't wrap.

Create.cshtml.cs

@page
@model HSLogApp.Pages.HSLogs.CreateModel

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Log</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            ....
            ....
            <div class="form-group">
                <label asp-for="Log.Comment" class="control-label"></label>
                <input asp-for="Log.Comment" class="form-control" style="height:250px; width:500px; vertical-align:top; white-space: pre-wrap;"/>
                <span asp-validation-for="Log.Comment" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

How can I get the cursor to flush to the top and how do I get it to wrap?

Solution

For multiline input use a textarea element.

There is an ASP.NET Core Tag Helper for it. The usage will be mostly the same as an input. Here is your example with a textarea.

<div class="form-group">
    <label asp-for="Log.Comment" class="control-label"></label>
    <textarea asp-for="Log.Comment" rows="3" class="form-control"></textarea>
    <span asp-validation-for="Log.Comment" class="text-danger"></span>
</div>

Now the use of the rows attributes in the textarea to specify the number of rows of text.

Answered By - Shaun Luttin

Answer Checked By - Marie Seifert (PHPFixing Admin)