VBox Maskierung und TextArea automatische Höhe

[Ullmann]

Das Problem, das ich hier in Flex gerade habe ist ein struktuelles. Langsam wird es nämlich kompliziert. Welche Komponenten verschachtele ich wie? Ich versuche es mal zu erklären.

Was ich erreichen möchte ist eine schwarze Box. Diese schwarze Box hat oben eine Überschrift.

Darunter fängt der Textinhalt an. Der ist immer Unterteilt in SubHeader und dann eine Textpassage mit jeweils unterschiedlichen Styles. (Die Styles sind alle schon existent).

Die Höhe der Textpassagen sollen sich automatisch einstellen, je nach Content.

Dementsprechend soll eben der nachfolgende Content weiter unten sein, wenn in einer Textpassage mehr Content ist. Ganz logisch.

Sobald der Text länger wird als der untere Rand wird maskiert und ein Scrollbalken scrollt den Text runter.

Schlussendlich soll der schwarze Kasten, in dem sich alles befindet natürlich auch noch variabel in der Größe sein, damit die Website sich unterschiedlichen Bildschirmgrößen anpassen kann.

Hier mal ein Bild, um sich das genauer vorzustellen:



Dabei habe ich mich jetzt mit den Komponenten ein bisschen verhaspelt.

Ich habe jetzt eine VBox erstellt mit 35px Abstand nach oben, unten, rechts und links. In dieser VBox kommt dann erstmal ein mx:Label (Überschrift), dann eine HBox für die beiden Texte nebeneinander (mx:TextAreas). (Linke Seite key, mit den Doppelpunkten; rechte Seite values).
Danach dann wieder ein Label. Usw.

Aber ich bekomme es nicht hin, dass allein die Texthöhe sich automatisch der Textmenge der TextAreas anpasst.
Nächstes Problem ist: WENN ich zu viel Inhalt habe, dann scrollt nicht der Inhalt der VBox, sondern der der ganzen Komponente (Canvas).

Wäre jemand so nett mich gedanklich zu unterstützen? Ich sehe gerade den Wald vor lauter Bäumen nicht mehr.

LG,
Ullmann

[ensel]

Im Prinzip müsste es so gehen:

Deine Komponente bekommt eine feste Größe und
verticalScrollPolicy=false
horizontalScrollPolicy=false

Du positionierst Deine Überschrift und darunter die VBox.

Die VBox bekommt eine feste Größe sowie
verticalScrollPolicy=true
horizontalScrollPolicy=false

Statt mx:TextArea nimmst Du besser mx:Text, damit sich die Größe automatisch einstellt und die Texte bekommen eine feste Breite (evtl. Prozentual).

Maskieren brauchst Du eigentlich gar nicht

Ich hab´s jetzt nicht ausprobiert, aber eigentlich sollte es so funktionieren.

P.S. Bei Spark-Komponenten wird das Scrollen etwas anders gehandhabt, aber die scheinst Du ja nicht zu verwenden.