Question

Here I want to make notifyPanel visible after changed to it’s state, with a smooth transition. But I want to let the notifyText to have it’s own height, what I mean is that if it’s multiline has some height if not, have other. Because of this i can’t just set the notifyPanel.height = 20

<s:Group width="100%" height="100%" minHeight="10">
        <s:layout>
            <s:VerticalLayout gap="0"/>
        </s:layout>

<!-- Here I want to make notifyPanel visible after changed to it's state, with a smooth transition. But I want to let the notifyText to have it's own height, what I mean is that if it's multiline has some height if not, have other. Because of this i can't just set the notifyPanel.height = 20 -->
        <s:Group id="notifyPanel" width="100%" minHeight="0">
            <s:Rect height="100%" width="100%">
                <s:fill>
                    <s:SolidColor color="#48E200"/>
                </s:fill>
            </s:Rect>
            <s:RichText id="notifyText" color="#ffffff" top="5" left="10" bottom="5" right="10" text="RichText"/>
        </s:Group>


        <s:Group height="100%" width="100%">
            <s:Rect height="100%" width="100%">
                <s:fill>
                    <s:SolidColor color="#FFFFFF"/>
                </s:fill>
            </s:Rect>
            <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0"/>
        </s:Group>


    </s:Group>

Answer 1

Remove the width & height on notifyPanel, that will cause it to size to its content. Also remove the constraints on notifyText so that it will also size to its content. Control the overall constraints by setting the minHeight & maxHeight on notifyPanel.

<s:Group id="notifyPanel">
   <s:Rect height="100%" width="100%">
       <s:fill>
          <s:SolidColor color="#48E200"/>
       </s:fill>
   </s:Rect>
   <s:RichText id="notifyText" color="#ffffff" text="RichText"/>
</s:Group>