2

Estou com dificuldade de aumentar o tamanho de meus inputs utilizando as classes bootstrap, gostaria de deixar eles conforme os tamanhos de minhas div por exemplo, em uma row com 12 colunas eu crio a div com col-md-12 e deixar o input do tamanho dessa div, como proceder? pois do jeito que estou fazendo não está funcionando. Lembrando que não gostaria de usar o width com css, pois sendo assim ele não fica responsivo, ou seja, quando eu diminuo o tamanho fica fixo.

Minha View

@model Projeto.ERP.Model.Model.Genericos.PaisModel

@{
    ViewBag.Title = "Create";
    bool cadastradoComSucesso = ViewBag.cadastradoComSucesso;
    bool cadastroComErro = ViewBag.cadastroComErro;
}

<style>
    #Sigla2, #Sigla3 {
        text-transform: uppercase;
    }

    #painelAuditoria, #painelGeral {
        border-top: hidden;
        border-top-left-radius: unset;
        border-top-right-radius: unset;
    }

    .checkbox {
        margin-top: 25px !important;
        margin-bottom: 10px !important;
        margin-left: 14px;
    }

    label {
        font-weight: normal;
    }
</style>

@using (Html.BeginForm("Create", "Pais", FormMethod.Post, new { @id = "form" }))
{
    <div class="page-header">
        <h1>Cadastro de Paises</h1>
    </div>

    <div id="alerta">

    </div>

    <ul class="breadcrumb">
        <li class="active"> Editar </li>
        <li><a href="@Url.Action("Index", "Pais")"> Listar Paises </a></li>
    </ul>

    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <ul class="nav nav-tabs" id="tabelaPresentarion">
        <li role="presentation" id="tabGeral" class="active"><a href="#">Geral</a></li>
        <li role="presentation" id="tabAuditoria"><a href="#">Audiroria</a></li>
    </ul>

    <div class="panel panel-default" id="painelGeral">
        <div class="panel-body">
            <div class="form-horizontal">
                <div class="container">
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-6">
                                <div class="checkbox" id="divCheckBox">
                                    @Html.LabelFor(model => model.Ativo, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.Ativo)
                                    @Html.ValidationMessageFor(model => model.Ativo, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-12">
                                @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control", placeholder = "" } })
                                @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group">
                            <div class="col-md-6">
                                @Html.LabelFor(model => model.Sigla2, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.Sigla2, new { htmlAttributes = new { @class = "form-control", placeholder = "" } })
                                @Html.ValidationMessageFor(model => model.Sigla2, "", new { @class = "text-danger" })
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-md-6">
                                @Html.LabelFor(model => model.Sigla3, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.Sigla3, new { htmlAttributes = new { @class = "form-control", placeholder = "" } })
                                @Html.ValidationMessageFor(model => model.Sigla3, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="submit" id="btnSalvar" value="Salvar" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="painelAuditoria">
        <div class="panel-body">
            <div class="form-horizontal">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.DataCadastro, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.DataCadastro, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.DataCadastro, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.UsuarioCadastro, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.UsuarioCadastro, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.UsuarioCadastro, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.DataAlteracao, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.DataAlteracao, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.DataAlteracao, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.UsuarioAlteracao, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.UsuarioAlteracao, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.UsuarioAlteracao, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Lista de Paises", "Index")
</div>

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

    @if (cadastradoComSucesso)
    {
        <script>
            var functionSuccess = function () {
                $('#alerta').html('<div class="alert alert-success" role="alert"> Registro cadastrado com sucesso.</div>')
                $('#alerta').fadeIn(9000);
            };

            functionSuccess();

            $('#alerta').fadeOut(5000);

            $('#btnSalvar').prop('disabled', true);
        </script>
    }
    else if (cadastroComErro)
    {
        <script>
            var functionWarrning = function () {
                $('#alerta').html('<div class="alert alert-danger" role="alert"> Erro ao salvar registro.</div>')
                $('#alerta').fadeIn(9000);
            };

            functionWarrning();

            $('#alerta').fadeOut(5000);
        </script>
    }
    <script>
            jQuery(document).ready(function () {



                var tabGeral = $('#tabGeral');
                var tabAuditoria = $('#tabAuditoria');

                var painelGeral = $('#painelGeral');
                var painelAuditoria = $('#painelAuditoria');

                tabGeral.click(function () {
                    painelGeral.show();
                    painelAuditoria.hide();

                    $('.nav.nav-tabs li').each(function () {
                        if ($(this).attr('class') == "active") {
                            $(this).removeClass('active');
                        }
                    });
                    $(this).addClass('active');
                });

                tabAuditoria.click(function () {
                    painelGeral.hide();
                    painelAuditoria.show();

                    $('.nav.nav-tabs li').each(function () {
                        if ($(this).attr('class') == "active") {
                            $(this).removeClass('active');
                        }
                    });
                    $(this).addClass('active');
                });

                tabGeral.click();
            });

    </script>
}

Resultado da view no Chrome

inserir a descrição da imagem aqui

3
  • Vc pode usar widthque fica responsivo sim. Tenta width: 100%... se ultrapassar a largura da div (pode acontecer por causa do padding do input), vá diminuindo 1% até que fique bom.
    – Sam
    Commented 24/10/2017 às 18:06
  • Consegui usando a propriedade min-width : 100% !important, por algum motivo o só o with não funcionava, como proceder para fechar a pergunta? eu mesmo respondo ou edito o post ? Commented 24/10/2017 às 18:24
  • Elabora uma resposta com o que vc fez e depois de 15 minutos marca ela como certa.
    – Sam
    Commented 24/10/2017 às 18:26

3 Respostas 3

0

Pelo que pude ver, você esta usando Asp.Net MVC e Eu tive o mesmo problema, então a solução é bem simples.

Quando criamos um projeto Asp.Net MVC é criado um arquivo na pasta Content chamado Site.css e então comentei às linhas abaixo, com isto tive todo o controle sobre os inputs

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/
0

Tente colocar a div com a class form-group do lado de dentro da definição de tamanho das "colunas" e a class row para definir cada "linha" do formulário.

Ficaria assim:

<div class="form-horizontal">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <div class="checkbox" id="divCheckBox">
                        @Html.LabelFor(model => model.Ativo, htmlAttributes: new { @class = "control-label" })
                        @Html.EditorFor(model => model.Ativo)
                        @Html.ValidationMessageFor(model => model.Ativo, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Nome, new { htmlAttributes = new { @class = "form-control", placeholder = "" } })
                    @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.Sigla2, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Sigla2, new { htmlAttributes = new { @class = "form-control", placeholder = "" } })
                    @Html.ValidationMessageFor(model => model.Sigla2, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    @Html.LabelFor(model => model.Sigla3, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Sigla3, new { htmlAttributes = new { @class = "form-control", placeholder = "" } })
                    @Html.ValidationMessageFor(model => model.Sigla3, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>
    </div>
</div>
6
  • Não funciona amigo, ficou da mesma forma que na imagem que anexei. Commented 24/10/2017 às 17:28
  • Poste o código HTML "cru" gerado pelo Razor na pergunta, para ver se consigo lhe ajudar Commented 24/10/2017 às 17:36
  • Veja se fica mais claro amigo. Editei Commented 24/10/2017 às 17:39
  • Cometi um equivoco, tente novamente com minha resposta editada, por favor. Se não funcionar infelizmente não conseguirei te ajudar Commented 24/10/2017 às 17:52
  • Ainda não deu certo @Breno, mas agradeço pela ajuda. Commented 24/10/2017 às 17:55
0

Resolvi meu problema depois de várias tentativas usando a propriedade CSS,
.form-control { min-width : 100% !important;}, dessa forma ele fica do tamanho da div pai.

Código

@model Projeto.ERP.Model.Model.Genericos.PaisModel

@{
    ViewBag.Title = "Create";
    bool cadastradoComSucesso = ViewBag.cadastradoComSucesso;
    bool cadastroComErro = ViewBag.cadastroComErro;
}

<style>
    #Sigla2, #Sigla3 {
        text-transform: uppercase;
    }

    #painelAuditoria, #painelGeral {
        border-top: hidden;
        border-top-left-radius: unset;
        border-top-right-radius: unset;
    }

    .checkbox {

        margin-left: 14px;
    }

    .form-control {
        min-width : 100% !important;

    }

    label {
        font-weight: normal;
    }
</style>

@using (Html.BeginForm("Create", "Pais", FormMethod.Post, new { @id = "form" }))
{
    <div class="page-header">
        <h1>Cadastro de Paises</h1>
    </div>

    <div id="alerta">

    </div>

    <ul class="breadcrumb">
        <li class="active"> Editar </li>
        <li><a href="@Url.Action("Index", "Pais")"> Listar Paises </a></li>
    </ul>

    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <ul class="nav nav-tabs" id="tabelaPresentarion">
        <li role="presentation" id="tabGeral" class="active"><a href="#">Geral</a></li>
        <li role="presentation" id="tabAuditoria"><a href="#">Audiroria</a></li>
    </ul>

    <div class="panel panel-default" id="painelGeral">
        <div class="panel-body">
            <div class="">
                <div class="container">
                    <div class="row">
                        <div class="form-group">
                            <div class="checkbox" id="divCheckBox">
                                @Html.LabelFor(model => model.Ativo, htmlAttributes: new { @class = "control-label" })
                                @Html.EditorFor(model => model.Ativo)
                                @Html.ValidationMessageFor(model => model.Ativo, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-12">
                            @Html.LabelFor(model => model.Nome, htmlAttributes: new { @class = "control-label" })
                            @Html.TextBoxFor(model => model.Nome, htmlAttributes: new { @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Nome, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            @Html.LabelFor(model => model.Sigla2, htmlAttributes: new { @class = "control-label" })
                            @Html.TextBoxFor(model => model.Sigla2, htmlAttributes: new { @class = "form-control", placeholder = "" })
                            @Html.ValidationMessageFor(model => model.Sigla2, "", new { @class = "text-danger" })
                        </div>
                        <div class="form-group col-md-6">
                            @Html.LabelFor(model => model.Sigla3, htmlAttributes: new { @class = "control-label" })
                            @Html.TextBoxFor(model => model.Sigla3, htmlAttributes: new { @class = "form-control", placeholder = "" })
                            @Html.ValidationMessageFor(model => model.Sigla3, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <input type="submit" id="btnSalvar" value="Salvar" class="btn btn-primary" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="panel panel-default" id="painelAuditoria">
        <div class="panel-body">
            <div class="form-horizontal">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.DataCadastro, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.DataCadastro, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.DataCadastro, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.UsuarioCadastro, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.UsuarioCadastro, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.UsuarioCadastro, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.DataAlteracao, htmlAttributes: new { @class = "control-label" })
                                    @Html.EditorFor(model => model.DataAlteracao, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.DataAlteracao, "", new { @class = "text-danger" })
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-offset-0 col-md-12">
                                    @Html.LabelFor(model => model.UsuarioAlteracao, htmlAttributes: new { @class = "control-label " })
                                    @Html.EditorFor(model => model.UsuarioAlteracao, new { htmlAttributes = new { @class = "form-control", @readonly = true } })
                                    @Html.ValidationMessageFor(model => model.UsuarioAlteracao, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Lista de Paises", "Index")
</div>

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

    @if (cadastradoComSucesso)
    {
        <script>
            var functionSuccess = function () {
                $('#alerta').html('<div class="alert alert-success" role="alert"> Registro cadastrado com sucesso.</div>')
                $('#alerta').fadeIn(9000);
            };

            functionSuccess();

            $('#alerta').fadeOut(5000);

            $('#btnSalvar').prop('disabled', true);
        </script>
    }
    else if (cadastroComErro)
    {
        <script>
            var functionWarrning = function () {
                $('#alerta').html('<div class="alert alert-danger" role="alert"> Erro ao salvar registro.</div>')
                $('#alerta').fadeIn(9000);
            };

            functionWarrning();

            $('#alerta').fadeOut(5000);
        </script>
    }
    <script>
            jQuery(document).ready(function () {



                var tabGeral = $('#tabGeral');
                var tabAuditoria = $('#tabAuditoria');

                var painelGeral = $('#painelGeral');
                var painelAuditoria = $('#painelAuditoria');

                tabGeral.click(function () {
                    painelGeral.show();
                    painelAuditoria.hide();

                    $('.nav.nav-tabs li').each(function () {
                        if ($(this).attr('class') == "active") {
                            $(this).removeClass('active');
                        }
                    });
                    $(this).addClass('active');
                });

                tabAuditoria.click(function () {
                    painelGeral.hide();
                    painelAuditoria.show();

                    $('.nav.nav-tabs li').each(function () {
                        if ($(this).attr('class') == "active") {
                            $(this).removeClass('active');
                        }
                    });
                    $(this).addClass('active');
                });

                tabGeral.click();
            });

    </script>
}

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .