Let me explain, I have a modal window that has 3 panels, the first one is in a row and has col-md-12, all right there.
the second and third panels are in a row with col-md-6 respectively.
All right up there, my problem is when I change the size of the screen, since the input that is inside the panel is out of its 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 come out with a width of 95%, in the test I do in my pc if the whole width goes out, here I can not, if someone can tell me how to edit it so they can try the best way, thanks in advance.