@Html.TextBoxFor

31/08/2017

Bom dia,

Pessoal sou iniciante em C#, CSS e HTML. Estou tendo dificuldade para modificar o tamanho (width) do textboxfor na minha aplica��o.
ja modifiquei as classes das <div> e do pr�prio controle textboxfor, tamb�m j� inclui o tamanho width que desejo no layout da classe que estou usando e mesmo assim o campo nao amplia. segue abaixo o c�digo da view para poderem me auxiliar.


@using SysLr.Web.Models
@using System.Web.Mvc
@using System.Web.Mvc.Html



@model SysLr.Application.Dto.EmpresaDto

@{Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Cadastro de Empresa";
}

<h2 style="align-items:center"><img src="~/Imagens/Company.png" height="30" width="30" /> Cadastro de Empresas</h2>

@using (Html.BeginForm("Salvar", "Empresa", FormMethod.Post))
{
    <style>
        .form-control {
            width: 400px;
        }
    </style>

    @Html.ValidationSummary(true)

    <!--Bot�es Formul�rio-->
    <div class="form-group ">
        <a href="~/Empresa/Novo"><button type="button" class="btn btn-default">Novo</button></a>
        <button type="submit" class="btn btn-default">Salvar</button>
        <button type="submit" class="btn btn-default">Editar</button>
        <button type="button" class="btn btn-default">Buscar</button>
        <button type="button" class="btn btn-default">Excluir</button>

    </div>


    <hr />

    <!--Campo ID-->
    <div class="form-group row">
        @Html.LabelFor(model => model.IdEmpresa, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.IdEmpresa, new { @class = "form-control", @disabled = true })
    </div>

   <!--Campo ID referencia-->
    <div class="form-group row ">
        @Html.LabelFor(model => model.Id_referencia, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.Id_referencia, new { @class = "form-control", @placeholder = "ID Refer�ncia", @style = "width:400px;" })
        <div class="alert-danger">
            @Html.ValidationMessageFor(model => model.Id_referencia)
        </div>
    </div>

    <!--Campo razao social-->
    <div class="form-group row">
        @Html.LabelFor(model => model.RazaoSocial, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.RazaoSocial, new { @class = "form-control", placeholder = "Raz�o Social", style = "width: 90%;" })
        <div class="alert-danger">
            @Html.ValidationMessageFor(model => model.RazaoSocial)
        </div>
    </div>

    <!--Campo CPF-CNPJ-->
    <div class="form-group row">
        @Html.LabelFor(model => model.CNPJ, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.CNPJ, new { @class = "form-control", placeholder = "CNPJ" })
        <div class="alert-danger">
            @Html.ValidationMessageFor(model => model.CNPJ)
        </div>
    </div>

    <!--Campo Email-->
    <div class="form-group row">
        @Html.LabelFor(model => model.Email, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder = "Email" })
    </div>

    <!--Campo Telefone-->
    <div class="form-group row">
        @Html.LabelFor(model => model.Telefone, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.Telefone, new { @class = "form-control", placeholder = "(DDD) 9999-9999" })
    </div>

   <!--Campo Endere�o-->
    <div class="form-group row">
        @Html.LabelFor(model => model.Endereco, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.Endereco, new { @class = "form-control", placeholder = "Endere�o, N�" })
        <div class="alert-danger">
            @Html.ValidationMessageFor(model => model.Endereco)
        </div>
    </div>
   <!--Campo bairro-->
    <div class="form-group row">
        @Html.LabelFor(model => model.Bairro, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.Bairro, new { @class = "form-control", placeholder = "Bairro" })
        <div class="alert-danger">
            @Html.ValidationMessageFor(model => model.Bairro)
        </div>
    </div>

  <!--Campo Cidade-->
    <div class="form-group row">
        @Html.LabelFor(model => model.Cidade, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.Cidade, new { @class = "form-control", placeholder = "Cidade" })
        @Html.ValidationMessageFor(model => model.Cidade)
    </div>

    <!--Campo Estado-->
    <div class="form-group row">
        @Html.LabelFor(model => model.Estado, new { @class = "col-sm-2 col-form-label" })
        @Html.TextBoxFor(model => model.Estado, new { @class = "form-control", placeholder = "UF" })
        <div class="alert-danger">
            @Html.ValidationMessageFor(model => model.Estado)
        </div>
    </div>

    <!--Campo Ativo-->
    <div class="form-group row ">
        @Html.LabelFor(model => model.Ativo, new { @class = "col-sm-2 col-form-label" })
        @Html.DropDownListFor(model => model.Ativo, new SelectList(new[] { new SelectListItem { Value = "true", Text = "SIM" }, new SelectListItem { Value = "false", Text = "N�O" }, }, "Value", "Text"), new { @class = "form-control" })
    </div>

             


}

Paulo Vargas

Curtir t�pico + 0

Responder

Post mais votado

13/09/2017

Voc� ir� ter que adicionar uma nova classe no CSS, pois voc� est� usando Bootstrap e a classe

form-control

vem com essa largura pr� definida.

William Nascimento

Responder

Gostei + 1

Mais Posts

19/09/2017

Paulo Vargas

Obrigado pela dica, mas ja havia resolvido. O problema estava em um arquivo css que estava limitando o tamanho dos campos em qualquer classe

@Styles.Render("~/Content/css")           /* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Responder

Gostei + 1