ExtJS: Entfernen unnötiger Formularelement Bildlaufleisten in Firefox

Question

Ich suche einen Rat in Bezug auf unnötige Bildlaufleisten auf bestimmte Formularelemente angezeigt. Ein Screenshot des Problems erscheint unten. Beachten Sie, dass die Bildlaufleiste ganz rechts nicht benötigt wird.

bad_scrollbars http://img21.imageshack.us/img21/9307/scrollfu.png

Der Täter scheint die folgende CSS zu sein, overflow: auto; das Hinzufügen von Elementen innerhalb von Fenstern in Gecko-basierten Browsern zu bilden (das Problem erscheint Firefox):

.ext-gecko .x-window-body .x-form-item { 
    outline: medium none; 
    overflow: auto; 
} 

diesen Stil Entfernen löst die Problem, aber ich bin vorsichtig vor möglichen Nebenwirkungen - obwohl ich noch keine bemerkt habe, war dieser Stil offensichtlich aus einem Grund enthalten.

Wer weiß mehr über Ext-Styling wissen, ob das Überschreiben dieser CSS den overflow: auto; Stil zu entfernen andere Probleme verursachen wird?

Nebenbei ist dies nur ein Problem (bis jetzt) ​​mit einer bestimmten Komponente - eine benutzerdefinierte Erweiterung der Ext.ux.form.MultiSelect-Komponente - obwohl andere Komponenten mehr vertikalen Platz verwenden. Kennt jemand einen möglichen Grund dafür?

Danke für jede Hilfe.

Answer 1

Überlauf: Auto weist den Browser an, dem Element eine Bildlaufleiste hinzuzufügen, wenn der Inhalt des Elements größer ist als der Bereich des Elements client minus Padding. Das Deaktivieren der Bildlaufleisten in CSS macht genau das. Es macht die Bildlaufleisten weg, egal was.

Der Nebeneffekt Ihrer Arbeit ist, wenn es Inhalte außerhalb des Clients gibt, die der Benutzer nicht sehen kann. Darüber hinaus wird dies nicht nur mit diesem Formular, sondern auch mit jedem Formular in Ihrer Anwendung geschehen, es sei denn, Sie wenden Ihre Problemumgehung in einer benutzerdefinierten Klasse an.

Die richtige Lösung ist, herauszufinden, warum Ihr Inhaltsbereich größer als der Clientbereich des Formulars ist. Firebug kann dabei eine große Hilfe sein, da Sie das DOM überprüfen und die Größe des Containers sowie die Größe aller untergeordneten Elemente sehen können.

Ich vermute, dass Ihre klare Auswahl steuern (ist dies ein benutzerdefiniertes Steuerelement?) Ist nicht richtig dimensionieren (dh in Ihrem Formularlayout Sie sagen, es x Pixel hoch sein, aber es ist tatsächlich selbst x + 1 Größe (nicht vergessen) Ränder und Padding). Das Formularlayout macht alle Arbeit, um zu entscheiden, wie groß der Wrapperbereich (der Bereich mit der Bildlaufleiste) und das Steuerelement muss in diesem Bereich passen.