How to set up large text area with text editor?

Question

0.00/5 (No votes)

See more:

I'm just started learning Bootstrap and ASP.Net MVC, a got little stuck.

This is my view:

@model Vrtic_2546.Models.Dogadjanja

@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
<h4>Dogadjanja</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.KorisnikID, "KorisnikID", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("KorisnikID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.KorisnikID, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Naziv, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Naziv, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Naziv, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Opis, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Opis, new { rows = "", cols = "", style = "width: 90%; height: 90px;" })
@Html.ValidationMessageFor(model => model.Opis, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Datum, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Datum, new {htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Datum, "", new { @class = "text-danger" })
</div>
</div>

<div class="form-group">
@Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextAreaFor(model => model.Text, new { rows = "5", cols = "56", style = "" })
@Html.ValidationMessageFor(model => model.Text, "", new { @class = "text-danger" })
</div>
</div>
</div>

<div class="form-group">
<div class="col-lg-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>

}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

And this is how it renders:
Picture

So, I need set up large "Text" textarea with text editor, a still keep it aligned from the left side.

What I have tried:

I tried few Bootstrap classes(col-lg10..etc), defined rows and columns, rows do get applied but columns don't. I'm not sure where is the problem is, can't grasp it, so any kind of help would be greatly appreciated.

Posted 1-Nov-16 8:01am

1suli0

Updated 1-Nov-16 9:49am

Add a Solution

Comments

Richard Deeming 1-Nov-16 15:00pm

Your screen-shot looks like a reasonable output. How did you want it to look?

1suli0 1-Nov-16 15:17pm

I wanted "Text" taxtarea to be something like "Add your solution here" textarea here on CodeProject, bigger then other controls on Form. I'm trying, but...without sucsess.

Richard Deeming 1-Nov-16 15:23pm

So you want it to be wider? Or taller? Or both?

1suli0 1-Nov-16 15:31pm

Both, would be great.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-11-01T09:49:00

Making the <textarea> taller is simply a case of increasing the rows parameter.

As to making it wider: start by adding @class = "form-control" to the attributes. That will make it take up the full width of the parent element, as the other controls do:

HTML

<div class="form-group">
    @Html.LabelFor(model => model.Text, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.TextAreaFor(model => model.Text, new { rows = "10", cols = "56", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Text, "", new { @class = "text-danger" })
    </div>
</div>

Then, if you want it to fill the entire width of the row, you'll need to remove the col-* declarations, and move it outside of the form-horizontal container: