cssasp.net-mvcbootstrap-4html.textboxfor

Why Html.TextBoxFor is not cover the all page in Asp.Net MVC?


I am using bootstrap form-control and I am trying to set my TextBoxFor element width as 100%. But it is shown like the picture below.

page shown like that

My code is below.

@model LearnWord.Models.WordModels

@{
    ViewBag.Title = "Add";
}

<h2>Add New Word</h2>

@using (Html.BeginForm("Add", "Word"))
{
    <div class="form-group">
        @Html.LabelFor(m => m.Word)
        @Html.TextBoxFor(m => m.Word, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Meaning)
        @Html.TextBoxFor(m => m.Meaning, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Synonyms)
        @Html.TextAreaFor(m => m.Synonyms, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Sentences)
        @Html.TextAreaFor(m => m.Sentences, new { @class = "form-control" })
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
}

And this is the _Layout.cshtml part which renders body.

<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - Created By ChivalrouS</p>
    </footer>
</div>

I tried to set width as 100% but it is already like that. When I tried to change width with 100px or 200px it was work but TextBox did not cover the page as a 100%.

I checked the other topics but I can not find the solution for my problem.


Solution

  • Actually I fixed this issue.

    In the css file there is a part which constraint the max-width as 280px for input, select and textarea. After I remove this part the problem was fixed.