troubleshooting Question

How can I increase the width of the Html.TextBoxFor control beyond its default in an MVC 5 form

Avatar of zonkerman
zonkermanFlag for United States of America asked on
1 Comment1 Solution127 ViewsLast Modified:
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;

        <section id="loginForm">
            @using (Html.BeginForm("Login", "Account",
              new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post,
              new { @class = "form-horizontal", role = "form" }))
                <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"

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 .textboxforworks.  But there seems to be some limit imposed on the control preventing it from being wider (such as 400px) than the default. What needs to be done to make the TextBoxFor control wider than the default?
Programmer Analyst

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 1 Comment.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros