1

Desconozco si lo que voy a preguntar existe la posibilidad o es una aberración. Estoy usando bootstrap 4.1.0. Teniendo el formulario que muestro a continuación, la lista de documentos (en el div derecho) es dinámica, es decir que el usuario puede añadir tantos como necesite. El tema es que cuando la lista alcanza la zona del botón de selección y zona drag and drop de archivos (div izquierda), comienza a desplazar (el div y su contenido) hacia abajo, cosa que he tratado de evitar. Lo que quisiera es que la lista al alcanzar a la zona de selección de archivos la lista continuara creciendo pero sin desplazar el div que contiene la selección de archivos.
Gracias.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"> 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


                <form role="form" class="formulario-principal" name="edDoc" id="edDoc" method="post">

                    <!-- ENTRADA PARA EL TITULO  -->
                      
                    <div class="form-group">

                        <div class="row">

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                          
                                <label for="edNombreDoc">Nombre Documento:</label>
                          
                                <input type="text" class="form-control input-lg titulo datosDocumentos" name="edNombreDoc" id="edNombreDoc" autofocus required>

                                <input type="hidden" name="idLiniaSel" id="idLineaSel">

                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

                                <label for="edFechaPubDoc">Fecha publicacion:</label>

                                <input type="date" class="form-control" name="edFechaPubDoc" id="edFechaPubDoc">

                            </div> 

                        </div>

                    </div>  

                    <!-- ENTRADA PARA DESCRIPCIÓN Y MOSTRAR ARCHIVOS ADJUNTOS-->                    

                    <div class="form-group">

                        <div class="row">

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">

                                <label for="edTextoDoc">Descripcion del documento:</label>

                                <textarea rows="6" class="form-control textarea texto datosDocumentos" name="edTextoDoc" id="edTextoDoc"></textarea>

                            </div>

                            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 edListaDocumentos " id="edListaDocumentos" style="list-style-type: none;"> 

                                <li>
                                    <div>
                                        <i class="far fa-file-pdf"></i>
                                        <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto A</a>
                                        <span class="clearfix">
                                            <!-- <span>`+archivo['size']+` Bytes</span> -->
                                            <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                        </span>
                                    </div>
                                 </li>

                                 <li>
                                    <div>
                                        <i class="far fa-file-pdf"></i>
                                        <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto B</a>
                                        <span class="clearfix">
                                            <!-- <span>`+archivo['size']+` Bytes</span> -->
                                            <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                        </span>
                                    </div>
                                 </li>

                                 <li>
                                    <div>
                                        <i class="far fa-file-pdf"></i>
                                        <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                        <span class="clearfix">
                                          <!-- <span>`+archivo['size']+` Bytes</span> -->
                                         <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                        </span>
                                    </div>
                                 </li>

                                 <li>
                                    <div>
                                        <i class="far fa-file-pdf"></i>
                                        <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto D</a>
                                        <span class="clearfix">
                                          <!-- <span>`+archivo['size']+` Bytes</span> -->
                                         <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                        </span>
                                    </div>
                                 </li>

                                 <li>
                                    <div>
                                        <i class="far fa-file-pdf"></i>
                                        <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto E</a>
                                        <span class="clearfix">
                                          <!-- <span>`+archivo['size']+` Bytes</span> -->
                                         <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                        </span>
                                    </div>
                                 </li>

                                 <li>
                                    <div>
                                        <i class="far fa-file-pdf"></i>
                                        <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto F</a>
                                        <span class="clearfix">
                                          <!-- <span>`+archivo['size']+` Bytes</span> -->
                                         <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                        </span>
                                    </div>
                                 </li>

                                 <li>
                                    <div>
                                        <i class="far fa-file-pdf"></i>
                                        <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto N</a>
                                        <span class="clearfix">
                                          <!-- <span>`+archivo['size']+` Bytes</span> -->
                                         <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                        </span>
                                    </div>
                                 </li>

                                 
                            </div>

                        </div>

                    </div>

                    
                    <!-- BUSCAR O SUBIR ARCHIVOS -->

                    <div class="form-group">

                        <div class="row">

                            <div class=" col-lg-6 col-md-6 col-sm-12 col-xs-12" id="edDropzone">

                                <p> <i class="fas fa-upload"></i></br>

                                Puede arrastrar y soltar los archivos en esta zona</br>(Tamaño máximo 128Mb)</br></br><label for="edArchivos">Buscar archivos</label></p>

                                <input type="file" class="edArchivos" id="edArchivos" multiple>

                                <input type="hidden" name="edAdjuntos" id="edAdjuntos" class="edDocumentosTemporales">

                            </div>

                        </div>

                    </div>

                </form>

3
  • 1
    No es un comportamiento muy fácil de lograr y esto tiene muchas aristas. Detectar que se ha llegado a un límite vertical dependerá de muchos factores. El tamaño de la pantalla o dispositivo es uno de estos factores. Saludos Commented el 8 nov. 2022 a las 18:06
  • podrias usar la propiedad de css overflow:scroll; en el div o "contenedor" padre de tu contenido, de esta forma el contenido puede crecer sin romper la maquetacion de la pagina, te recomiendo que si usas esta propiedad uses max-heigth tambien.
    – David081
    Commented el 8 nov. 2022 a las 18:23
  • El limite vertical de momento me da igual, con que no desplace hacia abajo la zona de selección de archivos, drag and drop, sería suficiente. Queda fatal muy feo ver como añado mas lineas de archivos y baja la zona de selección. Lo del límite lo vería de tratar con la clase overflow. No se, de momento el maldito limite no me importa, el desplazamiento hacia abajo si.
    – ramiro
    Commented el 8 nov. 2022 a las 18:26

1 respuesta 1

0

Lo que se me ocurrió hacer fue separar en 2 rejillas con las clases col-md-6 a tus dos contenidos (de la izquierda y derecha), con el md ocurrirá que cuando el ancho de la pantalla llegue a un cierto px, ambas rejillas ocuparán todo el ancho.

introducir la descripción de la imagen aquí

De esta forma, cuando se agregue más archivos (en la rejilla derecha), el ancho del <div> ocupará solo esa sección y no afectará a la mitad de la izquierda ya que están separados:

body {
  padding: 15px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<body>
    <form role="form" class="formulario-principal" name="edDoc" id="edDoc" method="post">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="form-group w-100">
                        <div class="col-12">
                            <label for="edNombreDoc">Nombre Documento:</label>
                            <input type="text" class="form-control input-lg titulo datosDocumentos" name="edNombreDoc"
                                id="edNombreDoc" autofocus required>
                            <input type="hidden" name="idLiniaSel" id="idLineaSel">
                        </div>
                    </div>
                    <div class="form-group w-100">
                        <div class="col-12">
                            <label for="edTextoDoc">Descripcion del documento:</label>
                            <textarea rows="6" class="form-control textarea texto datosDocumentos" name="edTextoDoc"
                                id="edTextoDoc"></textarea>
                        </div>
                    </div>
                    <div class="form-group w-100">
                        <div class="col-12" id="edDropzone">
                            <p>
                                <i class="fas fa-upload"></i></br>
                                Puede arrastrar y soltar los archivos en esta zona</br>(Tamaño máximo 128Mb)</br></br>
                                <label for="edArchivos">Buscar archivos</label>
                            </p>
                            <input type="file" class="edArchivos w-100" id="edArchivos" multiple>
                            <input type="hidden" name="edAdjuntos w-100" id="edAdjuntos" class="edDocumentosTemporales">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group w-100">
                    <div class="row">
                        <div class="col-12">
                            <label for="edFechaPubDoc">Fecha publicacion:</label>
                            <input type="date" class="form-control" name="edFechaPubDoc" id="edFechaPubDoc">
                        </div>
                        <div class="col-12 edListaDocumentos" id="edListaDocumentos" style="list-style-type: none;">
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                            <li>
                                <i class="far fa-file-pdf"></i>
                                <a href="#" class="edDocumento" idLinea="" edNombreDoc="">Nombre documento adjunto C</a>
                                <span class="clearfix">
                                    <!-- <span>`+archivo['size']+` Bytes</span> -->
                                    <button type="button" class="btn btn-danger btn-xs pull-right edQuitarDocumento" temporal title="Eliminar documento adjunto"><i class="fas fa-times"></i></button>
                                </span>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

Puedes ver mejor los resultados en el siguiente proyecto que tengo preparado.

6
  • Pues voy a probar y comento. A ver si soy capaz.
    – ramiro
    Commented el 8 nov. 2022 a las 19:08
  • Ok estimado, me confirma. Commented el 8 nov. 2022 a las 19:08
  • 1
    Pues si, funciona perfectamente. ¡¡Mil gracias por la ayuda!!, creo que no lo hubiese conseguido. Llevo ofuscado con el tema demasiado tiempo. Ahora lidiaremos con el overflow. Gracias!!!!!
    – ramiro
    Commented el 8 nov. 2022 a las 19:20
  • Recuerda marcar la respuesta si te sirvió para que tu pregunta esté como respondida, saludos! Commented el 8 nov. 2022 a las 19:21
  • Por favor disculpa mi ignorancia es la primera vez que formulo una pregunta y no sabría como hacerlo. Si eres tan amable de indicarme
    – ramiro
    Commented el 8 nov. 2022 a las 19:24

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.