Breitenproblem mit der Ext.Panel-Bbar in IE 6

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

Frage

Ich bin gerade auf einen Anzeigefehler im IE6 mit dem ExtJS-Framework gestoßen.- Hoffentlich kann mir jemand den richtigen Weg weisen.

Im folgenden Beispiel wird die Bbar für das Panel in IE6 2ems schmaler angezeigt als das Panel, an das sie angehängt ist (sie ist linksbündig), während sie in Firefox mit der gleichen Breite wie das Panel angezeigt wird.

Kann jemand vorschlagen, wie man das beheben kann?

Ich scheine in der Lage zu sein, dies zu umgehen, indem ich entweder die Breite des Panels in ems oder den Abstand in Pixel spezifiziere, aber ich gehe davon aus, dass es funktionieren würde, wie ich es unten habe.

<!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>
War es hilfreich?

Lösung

Das Problem liegt an der benutzerdefinierten BodyStyle-Polsterung.Dadurch wird der Panel-Inhalt größer, nicht jedoch die Symbolleiste.

Eine mögliche Lösung besteht darin, ein Ext-Panel weiter zu verschachteln, wie zum Beispiel:

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

Die Grenze:false wird benötigt, um doppelte Ränder zu vermeiden.

Andere Tipps

Vielleicht sollten Sie versuchen, die Breite des bbar zu erzwingen: 

main.getBottomToolbar().setWidth(500)

direkt nach dem Panel-Erstellung?

Aber ich denke, das Problem ist, dass bbar in inneren div der Platte wiedergegeben wird, so verschiedener Browser unterschiedlich äußerte Polsterung interpretieren.

Sie können auch versuchen padding des bbar zu -1em setzen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top