Customizing width of Textboxfor

Asked

Viewed 150 times

1

How to change the size of Textboxfor ? I followed exactly this solution and had no effect on my form: [How to Set a Larger Size for a Textboxfor

Bootstrap CSS file is being loaded first;

HTML:

@model Merc.Dominio.Entidade.Colaborador
@{
    ViewBag.Title = "COLABORADOR";
    Layout = "~/Areas/Administrativo/Views/Shared/_AdministrativoLayout.cshtml";
}
<style>
    .form-control-custom {
        width: 1000px;
    }
</style>
<input type="hidden" id="hidColaboradorID" name="hidColaboradorID" value="@Model.ColaboradorID" />
<div class="row">
    <div class="col-md-12">
        <fieldset>
            <legend>COLABORADOR - EDITAR</legend>

            <fieldset>
                <label><u>DADOS PESSOAIS:</u></label>
                <div class="row">
                    <div class="col-md-8">
                        @Html.LabelFor(x => x.Nome)
                        @Html.TextBoxFor(x => x.Nome, new { @class = "form-control form-control-custom"})
                    </div>

                    <div class="col-md-2">
                        <label>CPF</label>
                        @Html.TextBoxFor(x => x.CPFCNPJ, new { @class = "form-control" })
                    </div>
                    <div class="col-md-2">
                        <label id="RG" name="RG">RG</label>
                        @Html.TextBoxFor(x => x.RG, new { @class = "form-control" })
                    </div>

                </div>
            </fieldset>

        </fieldset>
    </div>
</div
  • It wouldn’t be because you’re setting the class col-Md-8?

1 answer

1

Note that the style of input is fixed at 250px:

<input class="form-control" id="Nome" name="Nome" style="width: 250px; height: 30px;" type="text" value="Benício Calebe Giovanni Araújo" />

Since it is Bootstrap, just delete all information from style that the size of input is lengthened to the widest possible size.


EDIT

style="min-width: 100%" is not a good way to solve it. You solve the problem only for one component, which you should solve for the entire application.

See also this answer.

  • The image’s HTML was outdated and I deleted it, well I don’t know why the input size was not lengthened, however I decided to add this style style = "min-width:100%

  • I edited commenting on your solution.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.