Problema di larghezza con Ext.Panel bbar in IE 6

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

Domanda

Ho appena riscontrato un problema tecnico di visualizzazione in IE6 con il framework ExtJS.- Spero che qualcuno possa indicarmi la giusta direzione.

Nell'esempio seguente, la barra del pannello viene visualizzata 2em più stretta del pannello a cui è collegato (è allineata a sinistra) in IE6, mentre come in Firefox viene visualizzata con la stessa larghezza del pannello.

Qualcuno può suggerire come risolvere questo problema?

Mi sembra di essere in grado di aggirare il problema specificando la larghezza del pannello in em o il riempimento in pixel, ma presumo che dovrebbe funzionare come indicato di seguito.

<!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>
È stato utile?

Soluzione

Il problema deriva dall'imbottitura personalizzata bodyStyle.Ingrandisce il contenuto del pannello, ma non la barra degli strumenti.

Una possibile soluzione è nidificare ulteriormente un pannello Ext, come:

    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'}
        ]
    });

Il confine:false è necessario per evitare il doppio confine.

Altri suggerimenti

Forse dovresti provare a forzare la larghezza della bbar:

main.getBottomToolbar().setWidth(500)

subito dopo la creazione del Pannello?

Ma penso che il problema sia che bbar è reso in inner div del pannello, quindi browser diversi interpretano il riempimento esterno in modo diverso.

Inoltre puoi provare a impostare padding del bbar a -1em.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top