Problema de ancho con Ext.Panel bbar en IE 6

StackOverflow https://stackoverflow.com/questions/90181

Pregunta

Acabo de encontrarme con un problema de visualización en IE6 con el marco ExtJS.- Ojalá alguien pueda indicarme la dirección correcta.

En el siguiente ejemplo, la barra b del panel se muestra 2 ems más estrecha que el panel al que está adjunta (está alineada a la izquierda) en IE6, mientras que en Firefox se muestra con el mismo ancho que el panel.

¿Alguien puede sugerir cómo solucionar este problema?

Parece que puedo solucionarlo especificando el ancho del panel en ems o el relleno en píxeles, pero supongo que se esperaría que funcionara como lo tengo a continuación.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    <script type="text/javascript">

    Ext.onReady(function(){        
        var main = new Ext.Panel({
            renderTo: 'content',
            bodyStyle: 'padding: 1em;',
            width: 500,
            html: "Alignment issue in IE - The bbar's width is 2ems less than the main panel in IE6.",
            bbar: [
                    "->",
                {id: "continue", text: 'Continue'}
            ]
        });
    });

    </script>
</head>
<body>
    <div id="content"></div>
</body>
</html>
¿Fue útil?

Solución

El problema proviene del relleno bodyStyle personalizado.Hace que el contenido del panel sea más grande, pero no la barra de herramientas.

Una posible solución es anidar aún más un panel Ext, como:

    var main = new Ext.Panel({
        renderTo: 'content',
        width: 500,
        items: {
            bodyStyle: 'padding: 1em;',
            border: false,
            html: "Now alignment is fine."
        },
        bbar: [
                "->",
            {id: "continue", text: 'Continue'}
        ]
    });

La frontera:Se necesita false para evitar el doble borde.

Otros consejos

Quizás deberías intentar forzar el ancho de la bbar:

main.getBottomToolbar().setWidth(500)

¿Justo después de la creación del Panel?

Pero creo que el problema es que bbar se convierte en interno div del panel, por lo que diferentes navegadores interpretan el relleno exterior de manera diferente.

También puedes intentar configurar padding de la bbar a -1em.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top