How to get clip content to work on mx TabNavigator?

Question

I have a TabNavigator and before that a ViewStack with TabBar that would not clip it's contents. It over flows the border or appears under other components positioned further down the screen. Has anyone run into this before?

Here is my code:

<mx:VDividedBox width="300" height="100%">
    <mx:TabNavigator id="firstViewStack" 
                borderStyle="solid" 
                width="100%"
                height="100%"
                clipContent="true">


        <s:NavigatorContent id="content1" 
                                    label="ITEMS">
            <views:Items height="550" width="100%" />
        </s:NavigatorContent>


        <s:NavigatorContent id="eventsContent" label="ITEMS 2">
            <views:Items height="880" width="100%"/>
        </s:NavigatorContent>
    </mx:TabNavigator>
</mx:VDividedBox>

Content correctly clipped Content not clipped

UPDATE
I've included a animated gif of me resizing the tab content. As you can see the mask appears to be sized to the content rather than the available area??? Notice the border of the tab navigator along the size is being overlapped when resizing.

I set the minimum height on all of the content to lower values and height to 100% on all the content so it is not as high but you can see the content is still not getting clipped.

I also tried with a VGroup rather than a VDividedBox and it doesn't matter.

enter image description here

Here is another code example:

<s:VGroup top="50" left="50" width="400">
    <mx:TabNavigator width="100%" height="300">
        <s:NavigatorContent label="TAB">
            <s:Group width="100%" height="400">
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor color="#ff0000"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:NavigatorContent>
        <s:NavigatorContent label="TAB">
            <s:Group width="100%" height="400">
                <s:Rect width="100%" height="100%">
                    <s:fill>
                        <s:SolidColor color="#0000ff"/>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:NavigatorContent>
    </mx:TabNavigator>
    <s:Button width="100%" label="HELLO WORLD"/>
    <s:Button width="100%" label="HELLO WORLD"/>
</s:VGroup>

enter image description here

Could you show a screenshot of this problem? It's not clear enough what should be done. — Anton, Apr 30 '13 at 21:48
I added some screenshots. Notice the content in the left image is not clipped and in the right column it is. — 1.21 gigawatts, May 01 '13 at 00:37
I have a VDividedBox around it. I updated the code. Sometimes if I pull the bottom tab up the content is clipped as in the right second image. But if the content is long it may still appear further down the page under the bottom tab group. — 1.21 gigawatts, May 01 '13 at 00:51
I uploaded a gif. I set the minimum height on all of the content to low values and height to 100% on all the content so it is not as high but you can see the content is still not getting clipped. — 1.21 gigawatts, May 01 '13 at 02:01
Could you give a little bit more code? I try to reconstruct your situation by me, but it looks in some another way. I would like to see all basic containers. At the moment your code containts only one child of the VDividedBox. Thanks — Anton, May 01 '13 at 07:46
I think the only way to solve the problem with red and blue rects is to add a Scroller. It works by me. Would it be a solution for you? — Anton, May 01 '13 at 16:49
That will probably work. I would add it as an answer. If it works I can mark it as a solution. — 1.21 gigawatts, May 03 '13 at 03:55

score 1 · Accepted Answer · answered May 03 '13 at 06:59

I have implemented 2 approaches - one with a Scroller and another with autosize.

Here is an example

Here is the code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" 
           minWidth="955" minHeight="600">

    <s:HGroup width="100%" height="100%" left="50" top="50">

        <!-- Using Scroller-->
        <s:VGroup width="400">

            <mx:TabNavigator width="100%" height="300">
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Scroller width="100%" height="100%">
                        <s:Group>
                            <s:Group width="100%" height="400">
                                <s:Rect width="100%" height="100%">
                                    <s:fill>
                                        <s:SolidColor color="#ff0000"/>
                                    </s:fill>
                                </s:Rect>
                            </s:Group>
                        </s:Group>  
                    </s:Scroller>

                </s:NavigatorContent>
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Scroller width="100%" height="100%">
                        <s:Group>
                            <s:Group width="100%" height="600">
                                <s:Rect width="100%" height="100%">
                                    <s:fill>
                                        <s:SolidColor color="#0000ff"/>
                                    </s:fill>
                                </s:Rect>
                            </s:Group>
                        </s:Group>  
                    </s:Scroller>
                </s:NavigatorContent>
            </mx:TabNavigator>

            <s:Button width="100%" label="HELLO WORLD"/>
            <s:Button width="100%" label="HELLO WORLD"/>
        </s:VGroup>

        <s:Spacer width="60"/>
        <!-- Using Autosize-->

        <s:VGroup top="50" left="50" width="400">

            <mx:TabNavigator width="100%" minHeight="300" resizeToContent="true" >
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Group width="100%" height="400">
                        <s:Rect width="100%" height="100%">
                            <s:fill>
                                <s:SolidColor color="#ff0000"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>

                </s:NavigatorContent>
                <s:NavigatorContent label="TAB" width="100%" height="100%">

                    <s:Group width="100%" height="500">
                        <s:Rect width="100%" height="100%">
                            <s:fill>
                                <s:SolidColor color="#0000ff"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>

                </s:NavigatorContent>
            </mx:TabNavigator>

            <s:Button width="100%" label="HELLO WORLD"/>
            <s:Button width="100%" label="HELLO WORLD"/>
        </s:VGroup>

    </s:HGroup>

</s:Application>

Note: In some of the tabs I have minHeight set at 400 but not the height set. The scroller doesn't clip those all the time unless I put height at 100%. — 1.21 gigawatts, May 07 '13 at 15:15

How to get clip content to work on mx TabNavigator?

1 Answers1