Fórum @Html.TextBoxFor #585475

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

1	`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