0

Lo que sucede es que hay una línea que delimita lo que vendría a ser el final del "modal-body". Pero como pueden ver en la imagen el contenido que ingreso dentro de la etiqueta con esa clase aparece como si estuviera fuera de ese contenedor pero un poco mas arriba del footer(los botones limpiar y guardar). introducir la descripción de la imagen aquí

He revisado las etiquetas para ver si he olvidado algún div sin cerrar pero no ha sido el caso. Quisiera saber si hay quizá una clase está interrumpiendo la correcta visualización del contenido. Gracias de antemano :) Aquí adjunto el código:

<div class="modal fade" id="filtro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Bandeja de Filtros</h4>
        </div>

        <div class="modal-body">
            <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="col-md-3 col-sm-3 col-xs-3">
                    <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 15px;">
                        <h5><center><b>Filtrar por Cajas: </b></center><h5>
                    </div>
                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Caja Salida: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <select id="cajaegreso_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Caja"  data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Cajas seleccionadas">

                            </select>
                        </div>

                    </div>

                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Caja Llegada: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <select id="cajallegada_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Caja"  data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Cajas seleccionadas">

                            </select>
                        </div>
                        <div class='col-md-4 col-sm-4 col-xs-4'></div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-3">
                    <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 15px;">
                        <h5><center><b>Filtrar por Tipos: </b></center><h5>
                    </div>
                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Tipo de Movimientos: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <select id="tmov_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Movimiento"  data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Movimientos seleccionados">

                            </select>
                        </div>
                        <div class='col-md-4 col-sm-4 col-xs-4'></div>
                    </div>  

                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Tipo de Documento: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <select id="tdoc_sele" multiple="multiple" class="form-control selectpicker sp1" title="Seleccione Tipos"  data-size="4" tabindex="-1" data-selected-text-format="count>3" data-count-selected-text= "{0} Tipos Seleccionados">

                            </select>
                        </div>
                        <div class='col-md-4 col-sm-4 col-xs-4'></div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-3">
                    <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 5px;">
                        <h5><center><b>Filtrar por Rango de Fechas: </b></center><h5>
                    </div>
                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Inicio: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <div class='input-group date' id='datet1'>
                                <input type='text' class="form-control" id='f_inicio' />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span> 
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Fin: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <div class='input-group date' id='datet2'>
                                <input type='text' class="form-control" id='f_fin' />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span> 
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-3 col-xs-3">

                    <div class="col-md-12 col-sm-12 col-xs-12" style="margin-bottom: 5px;">
                        <h5><center><b>Filtrar por Personas/Entidades: </b></center><h5>
                    </div>

                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Proveedor: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <input type='text' class="form-control" id='prov_busc' />
                        </div>
                    </div>

                    <div class="form-group col-md-12 col-sm-12 col-xs-12">
                        <label class="col-md-12 col-sm-3 col-xs-3 text-left">Personal: </label>

                        <div class='col-md-12 col-sm-4 col-xs-4'>
                            <input type='text' class="form-control" id='pers_busc' />
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="row">
                <button type="button" class="btn buscar btn-danger"><i class="fa fa-ban"></i>  Limpiar</button>
                <button type="button" class="btn buscar btn-primary"><i class="fa fa-search"></i>  Buscar</button>
            </div>
        </div>
    </div>
</div>

Cabe indicar que estoy usando 2 librerías aparte que son: bootstrap-select y bootstrap-datetimepicker respectivamente , no se si deba ingresarlos en el código para un mayor entendimiento (si es así lo edito sin problemas).

1 respuesta 1

0

Eso es por que en el contenedor principal que tienes en tu modal-body tiene las clases col-md-12 col-sm-12 col-xs-12. esas clases además de controlar el width también agregan una propiedad que es float:left y es la responsable de que veas que el contenido no está aparentemente dentro de su padre.

Para solucionarlo y que no se te vea así (aunque la verdad no hay ningún inconveniente en eso) solo basta con agregar las clases a tu modal-body

<div class="modal-body col-md-12 col-sm-12 col-xs-12">

Y listo, eso es todo !

2
  • Muchas gracias :). Lo que sucede es que aparecía una línea que es la que daba inicio al footer pero aparecía justo al final de donde "termina" el modal-body y pues no llega a mostrarse en la imagen pero hacía que el texto de los titulos de los filtros aparecieran tachados.
    – Bubblebug
    Commented el 19 oct. 2017 a las 14:51
  • Entonces ese problema creo que también lo hubieras podido resolver aplicando un clear: both; a tu modal-footer, saludos ! Commented el 19 oct. 2017 a las 14:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.