I explain, I have a modal window that has 3 panels, the first is in a row and has col-md-12, everything is fine there.
the second and third panel are in a row with col-md-6 respectively.
All good up to there, my problem is when I resize the screen, since the inputs that are inside the panel come out of their container, in this case the panel.
I leave 3 illustrative images so you can see it.
$('#dataUpdate').modal('show');
.modal-dialog {
width: 95%;
height: 100%;
margin: 3px 2% 2% 2%;
padding: 0;
}
.modal-content {
min-height: 95%;
}
#ide {
background-color: #E8F9FF;
}
#com1 {
background: #25995B;
color: white;
}
#com2 {
background-color: #dff0d8;
}
#ad1 {
background: #25995B;
color: white;
}
#ad2 {
background-color: #dff0d8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form id="actualizarDatos">
<div class="modal fade" id="dataUpdate" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 ng-hide="newUser">Detalles Del Cajero</h4>
</div>
<div class="modal-body">
<ul class="nav nav-tabs" id="tabContent">
<li class="active"><a href="#generales" data-toggle="tab">Generales</a></li>
<li><a href="#tecnicos" data-toggle="tab">Técnicos</a></li>
<li><a href="#disponibilidad" data-toggle="tab">Disponibilidad</a></li>
<li><a href="#visa" data-toggle="tab">VISA</a></li>
</ul>
<div class="tab-content" style="margin-top: 2em;">
<div class="tab-pane active" id="generales">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">Identificacion</div>
<div class="panel-body" id="ide">
<div class="form-group row">
<div class="col-md-2">
<label for="codigo">Codigo ATM</label>
<input class="form-control input-sm" id="codigo" type="text" name="codigo">
</div>
<div class="col-md-4">
<label for="nombre">Nombre</label>
<input class="form-control input-sm" id="nombre" name="nombreCorto" type="text">
</div>
<div class="col-md-6">
<label for="nombre">Nombre Largo</label>
<input class="form-control input-sm" id="nombre" name="nombreLargo" type="text">
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="dato1">Localidad:</label>
<select name="localidad" class="form-control input-sm">
<option value=" <?php echo $row['ID_PLATAFORMA'] ?> " ></option>
</select>
</div>
<div class="col-md-6">
<label for="dato1">Tipo De Ubicacion:</label>
<select name="plataforma" class="form-control input-sm">
<option value=" <?php echo $row['ID_PLATAFORMA'] ?> " ></option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="dato1">Tipo De Localidad:</label>
<select name="plataforma" class="form-control input-sm">
<option value=" <?php echo $row['ID_PLATAFORMA'] ?> " ></option>
</select>
</div>
<div class="col-md-6">
<label for="nombre">Nombre Largo</label>
<input class="form-control input-sm" id="nombre" name="nombreLargo" type="text">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading" id="com1">Comunicaciones</div>
<div class="panel-body" id="com2">
<div class="container">
<div class="form-group row">
<label class="col-sm-1 control-label">Proveedor</label>
<div class="col-sm-5">
<?php
$sql = 'SELECT ID_PLATAFORMA,DESC_PLATAFORMA FROM PLATAFORMA';
$result = sqlsrv_query($_conn, $sql)
?>
<select name="plataforma" class="form-control input-sm">
<option value=" <?php echo $row['ID_PLATAFORMA'] ?> " ></option>
</select>
</div>
</div>
</div>
<div class="container">
<div class="form-group">
<label class="col-sm-1 control-label">Dirección IP</label>
<div class="col-sm-5">
<input class="form-control input-sm" id="nombre" name="nombreLargo" type="text">
</div>
</div>
</div>
<div class="container">
<div class="form-group row">
<label class="col-sm-1 control-label">Gateway</label>
<div class="col-sm-5">
<input class="form-control input-sm" id="nombre" name="nombreLargo" type="text">
</div>
</div>
</div>
<div class="container">
<div class="form-group row">
<label class="col-sm-1 control-label">Subnet Mask</label>
<div class="col-sm-5">
<input class="form-control input-sm" id="nombre" name="nombreLargo" type="text">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading" id="ad1">Adicional</div>
<div class="panel-body" id="ad2">
<div class="container">
<div class="form-group row">
<label class="col-sm-2 control-label">Red Del Cajero</label>
<div class="col-sm-4">
<select name="plataforma" class="form-control input-sm">
<option value=" <?php echo $row['ID_PLATAFORMA'] ?> " ></option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">Tipo De ATM</label>
<div class="col-sm-4">
<select name="plataforma" class="form-control input-sm">
<option value=" <?php echo $row['ID_PLATAFORMA'] ?> " ></option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">Estado Del ATM</label>
<div class="col-sm-4">
<select name="plataforma" class="form-control input-sm">
<option value=" <?php echo $row['ID_PLATAFORMA'] ?> " ></option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 control-label">Producción</label>
<div class="col-sm-4">
<input style="height: 25px; width: 25px;" id="nombre" name="nombreLargo" type="checkbox">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tecnicos">
<h1>h</h1>
</div>
<div class="tab-pane" id="disponibilidad">
<h1>hhh</h1>
</div>
<div class="tab-pane" id="visa">
<h1>hhhj</h1>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-danger">Actualizar datos</button>
</div>
</div>
</div>
</div>
</form>
In this snippet I do not know why the modal does not appear with a width of 95%, in the test that I carry out on my PC if the entire width appears, I cannot here, if someone can tell me how to edit it so that they can test it in the best way, thanks beforehand.
Hello Luis Fernando, your problem is the misuse of the "container" class, you should have used the "col-sm-12" class in each panel (Communications and Additional) and then each element such as the label and the input put "col- sm-6" and they will occupy 100% of the parent container. I'm also missing the class row in IP address. I hope I've helped!. I leave you more information about the bootstrap grid system: https://ajgallego.gitbooks.io/bootstrap-3/content/capitulo_rejilla.html