2
I am having difficulty increasing the size of my inputs using the bootstrap classes, I would like to leave them according to the sizes of my div for example, in a Row with 12 columns I create the div with col-Md-12 and leave the input the size of this div, how to proceed? because the way I’m doing it isn’t working. Remembering that I would not like to use width with css, therefore it is not responsive, IE, when I decrease the size is fixed.
My 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>
}
View result in Chrome
You can use
widththat gets responsive yes. Trywidth: 100%... if you exceed the width of the div (it can happen because of the input padding), decrease 1% until it is good.– Sam
I managed using the min-width property : 100% ! Mportant, for some reason only with didn’t work, how to proceed to close the question? self reply or edit the post ?
– Nicola Bogar
Elaborate a response with what you did and after 15 minutes mark it as right.
– Sam