He posicionado Vis-network dentro de las secciones flexibles.

Puedes ver el código completo aquí: https://codepen.io/MadBoyEvo/pen/XWdgzoB (intente mover elementos hacia abajo)

El problema es que cada vez que trato de cambiar el tamaño de la altura de la sección manualmente a '1000px' o cualquier valor, la altura del diagrama permanece igual. Cuando presiono la altura directamente para cambiar el tamaño de las secciones del diagrama correctamente. Pero esto es problemático cuando coloco algo en el lado derecho que expande la sección principal y el diagrama se queda con el tamaño predeterminado. Intenté usar autosize para vis.js pero no parece afectar nada.

var options = {
    "interaction": {
        "hover": true
    },
    "autoResize": true
};

Probé la altura / ancho al 100% y parece que también trata la altura mínima como la altura máxima.

.diagram {
    min-height: 400px;
    width: 100%;
    height: 100%;
    border: 0px solid unset;
}

.vis-network:focus {
    outline: none;
}
<div class="defaultSection overflowHidden">
    <div class="defaultSectionHead">
        <div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a>&nbsp;<a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
    </div>
    <div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
        <div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
            <div class="defaultSection overflowHidden">
                <div class="defaultSectionHead">
                    <div class="defaultSectionText"><a> </a>&nbsp;<a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
                </div>
                <div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
                    <div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
                        <div class="diagram" style="position:relative">
                            <div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flexPanel overflowHidden defaultPanel">
                <div></div>
            </div>
        </div>
    </div>
</div>

Supongo que podría estar relacionado con la posición relativa / absoluta, pero si lo elimino, el diagrama se redimensionará automáticamente, lo que se ve muy extraño.

<div class="diagram" style="position:relative">
    <div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>

enter image description here

El objetivo final para mí es hacer que un diagrama cambie de tamaño automáticamente si algo en el lado derecho se expande y que se encoja si es más pequeño (mínimo 400 px), a menos que fuerce el diagrama a un valor estático. Además, si configuro secciones / paneles en algo más grande, me gustaría que el diagrama se redimensionara para que coincida.

En este momento parece que estoy luchando contra la flexión para colocarlo correctamente.

0
MadBoy 29 ago. 2020 a las 18:54

1 respuesta

La mejor respuesta

En la ruta desde el elemento con altura: 1000px hasta el elemento que contiene el diagrama, hay un elemento div que no propaga la altura. Esto se puede solucionar configurando display:flex en ese elemento, consulte la clase css fix1 y su elemento html correspondiente en el código siguiente.

La otra clase css, fix2, muestra cómo puede hacer que el panel derecho ajuste automáticamente su ancho (según el ancho de su contenido y un ancho mínimo que elija, 600px en este ejemplo) y haga que el panel izquierdo ocupe el espacio restante.

.fix1 {
    display: flex;
    flex-direction: column;
}
.fix2 {
    flex-basis: auto !important;
    min-width:600px;
}

<div class="defaultSection overflowHidden">
    <div class="defaultSectionHead">
        <div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a>&nbsp;<a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
    </div>
    <div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
        <div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
            <div class="defaultSection overflowHidden fix1">
                <div class="defaultSectionHead">
                    <div class="defaultSectionText"><a> </a>&nbsp;<a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
                </div>
                <div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
                    <div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
                        <div class="diagram" style="position:relative">
                            <div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flexPanel overflowHidden defaultPanel fix2">
                <div></div>
            </div>
        </div>
    </div>
</div>

Puede ver el código completo aquí

1
mcernak 1 sep. 2020 a las 10:26