CODEWITHSUNDEEP
htmlcssasp.net-mvctwitter-bootstraprazor
lapsus
lapsus

Reputation: 33

Why form lost bootstrap css?

I'm learning MVC and I'm making contact form by first code. Could someone of you explain me why the message area is smaller than title editor and why it lost the bootstrap css?

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

<div class="form-horizontal">

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

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

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

Upvotes: 0

Views: 865

Answers (3)

ramiramilu
ramiramilu

Reputation: 17182

Here is the updated Fiddle - https://dotnetfiddle.net/DWy02w

Output :

enter image description here

HTML : 

@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    </head>

    <body>
        <div class="container col-md-10">
            @using (Html.BeginForm()) 
            {
            @Html.AntiForgeryToken()

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

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

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="wyslij" class="btn btn-default" />
                    </div>
                </div>
            </div>
            }
        </div>  
                <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>   
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
    </body>
</html>

Model : 

using System;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        public string title
        {
            get;
            set;
        }

        public string message
        {
            get;
            set;
        }
    }
}

Upvotes: 1

levelnis
levelnis

Reputation: 7705

You might want to use a text box instead of an editor template. Replace this:

@Html.EditorFor(model => model.title, new { htmlAttributes = new { @class = "form-control" } })

With this:

@Html.TextBoxFor(model => model.title, new { htmlAttributes = new { @class = "form-control" } })

Upvotes: 0

Alexander Polyankin
Alexander Polyankin

Reputation: 1887

AFAIK your usage of bootstrap grid classes (col-*) is wrong. Probably you should wrap your form in in a row and column, like this:

<div class="row">
  <div class="col-md-10">
    @using(Html.BeginForm())
    {
    ...
    }
  </div>
</div>

As for width of message textarea, I think it is because of styles in Site.css. You can try to remove the link to Site.css and see if it helps.

Upvotes: 0

Related Questions