@Html.TextBoxFor

31/08/2017

0

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

Paulo Vargas

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

William Nascimento
Responder

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

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar