none
How can I increase the width of the Html.TextBoxFor control beyond its default in an MVC 5 View RRS feed

  • Question

  • I am trying to increase the width of an Html.TextBoxFor control in an ASP.NET MVC 5 View page using razor syntax. I am using Visual Studio 2017. I created a css style (textboxfor) to increase the control's width as shown below but it is not working.

    Below is the MVC View:


    @using rgmsite.Models
    @model LoginTestViewModel
    @{
        ViewBag.Title = "Log in";
    }

    <style type="text/css">
        .textboxfor-width {
            width: 700px;
        }
    </style>

    <h2>SimpleTest</h2>
            <section id="loginForm">
                @using (Html.BeginForm("Login", "Account",
                  new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post,
                  new { @class = "form-horizontal", role = "form" }))
                {
                    @Html.AntiForgeryToken()
                    <div class="form-group">
                        @Html.TextBoxFor(m => m.Email,
                       new {  @class = "form-control textboxfor-width",
                           placeholder = "Enter email address to be used as your user name"
                       })
                    </div>
                }
            </section>

    Below is the View Model being used:


      public class LoginTestViewModel
      {
        public string Name { get; set; }
        public string Email { get; set; }
      }

    Using a smaller width value such as 40px in the css .textboxfor class works.  But there seems to be some limit imposed on the control preventing it from being wider (such as 700px) than the default. What needs to be done to make the TextBoxFor control wider than the default? Thanks in advance.


    Wednesday, January 29, 2020 9:48 PM

Answers

  • If you used the default MVC template (with Bootstrap) to start your project this will be in your Site.css file.  Alter as required.

    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }

    • Marked as answer by zonkerman Wednesday, January 29, 2020 11:13 PM
    Wednesday, January 29, 2020 9:55 PM

All replies

  • If you used the default MVC template (with Bootstrap) to start your project this will be in your Site.css file.  Alter as required.

    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        max-width: 280px;
    }

    • Marked as answer by zonkerman Wednesday, January 29, 2020 11:13 PM
    Wednesday, January 29, 2020 9:55 PM
  • MVC Razor page controls can be discussed at the MVC form in ASP.NET forums.

    http://forums.asp.net/

    Wednesday, January 29, 2020 10:11 PM