@Html.TextBoxFor
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.
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
Curtidas 0
Melhor post
William Nascimento
13/09/2017
Você irá ter que adicionar uma nova classe no CSS, pois você está usando Bootstrap e a classe vem com essa largura pré definida.
form-control
GOSTEI 1
Mais Respostas
Paulo Vargas
31/08/2017
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; }
GOSTEI 1