¿Cómo resolver el problema de full-height en jxqSplitter

28 de abril de 2015

Hace algún tiempo estuve viendo como usar un splitter para crear un panel vertical con un grupo de funcionalidades y herramientas muy largo. Después de probar varios splitters, el que mejor vi por el soporte que prestenta es el jxqSplitter. Ahora, este al igual que los demás son un dolor de cabeza para lo que quiero porque trabajan mucho con los anchos y los altos. Eso hace que los paneles con contenido variables y muy largos no se vean dentro del splitter o cuando más tengas que usar el scroll. Las soluciones son varias pero no se ven muy profesionales y no resulven de a fondo el problema. Todos queremos web dinámicas y adaptativas con altos y anchos que puedan ajustarse a todos los dispositivos, además casi siempre usamos Bootstrap o algún tema html con montones de css.

No voy a entrar en detalles de como funciona el splitter por dentro porque de hecho no lo domino del todo, pero si vamos a analizar la solución Fluid que los desarrolladores dan. La del tanto en el body como en el splitter height: ‘100%’:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- .... --> 
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <style>
        html, body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#splitter').jqxSplitter({
                width: '100%',
                height: '100%',
                orientation: 'vertical',
                panels: [
                   { size: "50%", min: "10%", collapsible: false },
                   { size: '50%', min: "5%"}]
            });       
        });
    </script>
</head>
<body>    
    <div id="splitter">            
        <div id="split1">                    
        </div>            
        <div id="split2">         
        </div>
    </div>
</body>
</html>

Aquí los elementos importantes son: primero los estilos definidos en este caso en la etiqueta<style>; por otra parte definir el height del splitter en 100%. Esto hace que el splitter tome el 100% del elemento superior que lo contiene que sería en este caso el <body>.

Esto funciona pero es relativo ya que el 100% del body lo componen los elementos que tenga y nunca es suficientemente grande si dentro del splitter tienes muchos elementos pueden exceder facilmente el 100% del body.

La solución no fue trivial aunque el resultado final es muy simple. Removí el contenido del<style> anterior y poco a poco fui dandole la vuelta al problema modificando el estilo hasta llegar a esto:

 <style>
        .jqx-splitter > div:first-child, .jqx-splitter-panel + .jqx-splitter-splitbar-vertical {
            float: left;
        }

        .jqx-splitter .jqx-splitter-panel {
            position: relative;
        }

        .jqx-splitter-splitbar-vertical + .jqx-splitter-panel {
            left: 6px !important;
        }

        .jqx-splitter-splitbar-collapsed + .jqx-splitter-panel {
            position: absolute;
        }
    </style>

El tercer selector va a depender del tamaño del splitbar, pero ese valor es el estandar. Este estilo no es fijo o estáticos y puede depender de la cantidad de splitter que tengas, ya que no funciona igual vertical que horizontal así que sientete libre de probar nuevos estilos.

Que permite esta solución:

Tener un splitter donde los paneles no tengan límites definidos por porciento o por pixeles a todo lo alto de este. Va a depender de los elementos que posean internos y de su altura. Si posees muchos muchos elementos van a verse todos en el splitter. Pero si además tienes un panel muy largo en un splitter y se cierra (en este caso colapsa a la derecha) pués se ajusta a esto y la altura dependerá del panel que quede visible.

Espero que les resulte útil ya que hasta ahora no había encontrado solución a esto.

Mejorar el rendimiento de Symfony Cmf Dynamic Routing utilizando la opción de configuración uriFilterRegexp

He estado trabajando por un tiempo con Symfony Cmf (SfCmf) y he desarrollado algunos sitios con él. Además he creado algunos bundles extras para imple...


Mejorando la experiencia de desarrollar aplicaciones Symfony con Flex

Después de algún tiempo de espera tras anunciar Flex, ya se encuentra disponible y público lo que será el nuevo juguetito de los desarrolladores Symfo...


IMPRESIONES DEL SEGUNDO ENCUENTRO DE DESARROLLADORES HABANA.

Hace solo algunos días que conozco este grupo de entusiastas y emprendedores que se comunican mediante Google Group bajo el nombre de Desarrolladores...