@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