Problème de largeur avec la barre Ext.Panel dans IE 6

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

Question

Je viens de rencontrer un problème d'affichage dans IE6 avec le framework ExtJS. - J'espère que quelqu'un pourra me diriger dans la bonne direction.

Dans l'exemple suivant, la barre b pour le panneau est plus étroite que le panneau auquel elle est attachée (elle est alignée à gauche) dans IE6, où, comme dans Firefox, elle est affichée avec la même largeur que le panneau.

Quelqu'un peut-il suggérer une solution?

Il semble que je sois capable de contourner le problème en spécifiant la largeur du panneau dans ems ou le remplissage en pixels, mais je suppose que cela devrait fonctionner de la manière indiquée ci-dessous. 

<!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>
Était-ce utile?

La solution

Le problème provient du remplissage bodyStyle personnalisé. Cela agrandit le contenu du panneau, mais pas la barre d’outils.

Une solution possible consiste à imbriquer davantage un panneau Ext, tel que: 

    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 bordure: false est nécessaire pour éviter la double bordure.

Autres conseils

Peut-être devriez-vous essayer de forcer la largeur du bbar: 

main.getBottomToolbar().setWidth(500)

juste après la création du Panel?

Mais je pense que le problème est que bbar est rendu dans le div intérieur du panneau, de sorte que différents navigateurs interprètent différemment le remplissage externe.

Vous pouvez également essayer de définir le remplissage de la barre b sur -1em .

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top