[Html] ¿Por qué las pestañas de Bootstrap muestran divisiones de pestañas con anchuras incorrectas cuando se utilizan gráficos altos?


Answers

La causa

Esto no es un problema de Highcharts, al menos no por sí mismo, el problema está causado por el hecho de que Bootstrap utiliza display: none para ocultar pestañas inactivas:

.tab-content > .tab-pane, .pill-content > .pill-pane {
    display: none;      /* this is the problem */
}

Esto hace que Highcharts no pueda obtener el ancho esperado para inicializar el gráfico, por lo tanto, el valor predeterminado es 600px . Esto pasaría con otras herramientas que usan el mismo enfoque para ocultar contenido.

Una solución de CSS puro

En lugar de solucionar el problema con un redibujado adicional o una inicialización diferida, podemos lograr el efecto oculto utilizando height: 0; overflow-y: hidden height: 0; overflow-y: hidden , de esta manera los paneles de pestañas ocultos están todavía en su lugar y tienen un width válido:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
    display: block;
    height: 0;
    overflow-y: hidden;
} 
/* bootstrap hack end */

Actualización : la solución anterior de 2 pasos oculta primero todas las pestañas, luego hace que la pestaña activa sea visible nuevamente. En comparación, ahora tenemos una solución de 1 paso, que se dirige directamente a las pestañas inactivas.

Esta solución es perfecta, por lo que ya no tendrá que preocuparse si el gráfico está dentro de un panel de pestañas o no. Y es eficiente, ya que soluciona el problema de ancho en primer lugar, por lo que no hay necesidad de solucionar el problema de ancho posteriormente a través de resize / redraw / reflow usando javascript.

Nota sobre el orden en cascada

Este parche debe cargarse después de bootstrap css, debido a las reglas de orden en cascada del CSS , en resumen, la última regla gana .

Manifestación

Before vs After

Consejo: cambie a la pestaña Perfil para ver la diferencia.

Question

Así que estoy creando una página con contenido con pestañas usando Bootstrap de Twitter, pero el contenido de mi div activo inicial siempre es diferente al de mis otras pestañas. Por ejemplo, estoy colocando gráficos usando Highcharts.js en mis diferentes pestañas, pero el activo siempre se muestra correctamente mientras que los otros tienen un ancho incorrecto.

Mira el ejemplo a continuación:

        <div class = "row-fluid">
        <div class = "span9">
            <div class = "row-fluid">
                <h3>Test</h3>

                    <ul class="nav nav-tabs">
                        <li class = "active">
                            <a data-toggle = "tab" href = "#one">One</a>
                        </li>
                        <li><a data-toggle = "tab" href = "#two">Two</a></li>
                        <li><a data-toggle = "tab" href = "#three">Three</a></li>
                    </ul>

                    <div class="tab-content">

                        <div class="tab-pane active" id="one" >
                            <h4>One</h4>
                            <div id = "container1"></div>
                            <script type = "text/javascript">
                                $(function () {
                                    $('#container1').highcharts({
                                        chart: {
                                        },
                                        xAxis: {
                                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                        },
                                        series: [{
                                            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                        }]
                                    });
                                });
                            </script>
                        </div>

                        <div class="tab-pane" id="two" >
                        <h4>Two</h4>
                        <div id = "container2"></div>
                        <script type = "text/javascript">
                            $(function () {
                                $('#container2').highcharts({
                                    chart: {
                                    },
                                    xAxis: {
                                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                    },
                                    series: [{
                                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                    }]
                                });
                            });
                            </script>
                        </div>

                        <div class="tab-pane" id="three" >
                        <h4>Three</h4>
                        <div id = "container3"></div>
                        <script type = "text/javascript">
                            $(function () {
                                $('#container3').highcharts({
                                    chart: {
                                    },
                                    xAxis: {
                                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                                    },
                                    series: [{
                                        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
                                    }]
                                });
                            });
                            </script>
                        </div>

                    </div> 
            </div>
        </div>
        <div class = "span3">
            <p>Here is the content on my sidebar</p>
        </div>
    </div>

En este caso, cambiar la pestaña activa en la carga de la página hace que la gráfica parezca correcta para mí, pero el resto siempre se extiende hasta el borde (en el caso de mis datos, que solo quiero llenar el espacio del span9) div. Acabo de usar gráficos ficticios en este caso, pero es la misma idea.

Aquí hay un JSFiddle: http://jsfiddle.net/dw9tn/

Mis preguntas para todos ustedes son:

1.) ¿Esto solo soy yo?

2.) ¿Qué está sucediendo exactamente cuando las pestañas se activan? En cuanto al css bootstrap, parece tratarse de display: none y display: block, pero no entiendo muy bien cómo funciona en este caso.

3.) ¿Es este un problema de alto guión o un problema de arranque? Noté que me sucedió esto con elementos que no son Highchart (como mostrar tweets en la barra lateral), así que me estoy inclinando por el bootstrap.

4.) ¿Hay alguna solución que pueda encontrar para hacer que todo sea consistente?

¡Gracias chicos!




El "ancho" de estilo en línea es diferente para los gráficos. No estoy seguro de cuándo y cómo se calculan, pero puede anular aquellos en CSS, por ejemplo.




Basado en la respuesta de Pawel, renderizo el cuadro al principio y luego cambio el tamaño del cuadro.

El código utilizado (con bootstrap 3.0.3 y HighCharts 3.0.7)

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $('#container').highcharts().setSize($('#container').width(),$('#container').height());
})

Fuente: http://getbootstrap.com/javascript/#tabs-usage