How to change the length of an input in Asp.net MVC

Asked

Viewed 193 times

1

Hello, I’m having a hard time changing the width(length) of an input in asp.net MVC, I followed the course guidelines and it didn’t work.

follows the code of my view, if anyone can help....

I can’t update the bootstrap 3.7 for version 4, I had incompatibility with plugins in javascript.

<style>
    body {
        background-color: beige;
        overflow-y: visible;
        overflow-x: visible
    }
</style>
@model SIIv3.Models.CAD_CIDADE

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

<h2>Inserir um novo registro</h2>

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @*<div class="form-group">
            @Html.LabelFor(model => model.CODCIDADE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CODCIDADE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CODCIDADE, "", new { @class = "text-danger" })
            </div>
        </div>*@

        <div class="form-group">
            @Html.LabelFor(model => model.CIDADE, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CIDADE, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CIDADE, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UF, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UF, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UF, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Inserir" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Voltar para listagem geal", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

follows a page generated after processing.

insira o código aqui

<!DOCTYPE html>
<html lang="pt-br">
<head>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.12.4.min.js"></script>
<link href="/Content/Site.css" rel="stylesheet" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Create - Sistema de Informação Integrado</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data- 
toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">SII</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data- 
 toggle="dropdown">Injetora<span class="caret"></span></a>
                    <ul class="dropdown-menu" style="font-size: 1em">
 href="/RastreamentoLotesInjetora">Rastreamento de Lotes</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data- 
 toggle="dropdown">Silos Externos<span class="caret"></span></a>
                    <ul class="dropdown-menu" style="font-size: 1em">
                        <li><a href="/SiloExterno">Monitoramento</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" data- 
toggle="dropdown">Lista de Presença<span class="caret"></span></a>
                    <ul class="dropdown-menu" style="font-size: 1em">
                        <li><a 
href="/ListaPresenca/ConsultaEscalaFolga">Escala Folgas</a></li>
                    </ul>
                </li>
            </ul>



<ul class="nav navbar-nav navbar-right">

    <li class="nav-item"><a href="/Account/Register" 
id="registerLink">Registre-se</a></li>

    <li class="nav-item ml-2"><a href="/Account/Login" 
id="loginLink">Entrar</a></li>
</ul>
        </div>
    </div>
</div>
<div class="containerbody">
    <style>
        body {
            background-color: black;
            overflow-y: hidden;
        }
    </style>
 <h2>Create</h2>
<link href="/Content/EstiloPersonalizado.css" rel="stylesheet" />
<form action="/cad_statusevento/Create" method="post"><input 
name="__RequestVerificationToken" type="hidden" 
value="v5dSscXvRgLd98jnLHTonXiWPOhms201e4suasgaflOJALyMjzL7E9gxn3J4- 
QSbLub8ntkkX5L_FRMfMX4kYgExKw7bxIVf55bD9oKoKq01" />    <div class="form- 
horizontal col-md-12">
    <h4>CAD_STATUSEVENTO</h4>
    <hr />

    <div class="form-group">
        <label class="control-label col-md-2" 
for="DESCRICAOSTATUSEVENTO">Evento</label>
        <div class="" style="width: 2000px">
            <input class="form-control text-box single-line" data-val="true" 
data-val-length="Insira uma descrição de 1 a 30 caracteres" data-val-length- 
max="30" data-val-required="Entre com a descrição da Evento" 
id="DESCRICAOSTATUSEVENTO" name="DESCRICAOSTATUSEVENTO" style="width: 500px" 
type="text" value="" />
            <span class="field-validation-valid text-danger" data-valmsg- 
for="DESCRICAOSTATUSEVENTO" data-valmsg-replace="true"></span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>
</form>
<div>
   <a href="/cad_statusevento">Back to List</a>
</div>
</div>
   <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>

inserir a descrição da imagem aqui

  • Roberto because you no longer put col-Md-12 and not 10? Have you post the code that is rendered in the browser or a screen print explaining better?

  • follow the page and I took a printscreen, I would like inputbox to be bigger, had already changed to col-Md-12, but it did not help. it’s as if the length of the screen was limited to half the screen.

  • Roberto I took the code you posted in the edition and adjusted what I needed. I think it turned out the way you wanted, but if you have any questions just comment on the answer that I help you.

  • hello, I was able to figure out the problem. The Site.CSS file was keeping all inputs fixed in size. remove the line and it worked. Thank you for your attention.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.