6 Replies Latest reply on Mar 7, 2011 9:14 PM by jpwrunyan

    Flex 4 NavigatorContent containing a Form issue

    RobX82 Level 1

      I have an accordion control that contains a few NavigatorContent containers within it.  I seem to be running into an issue when I have a Form control within in a NavigatorContent container.  If I have a lot of items in my form, the form will expand past the bounds of the NavigatorContent and the Accordion to display all the items on the list. 

       

      The NavigatorContent doesn't seem to have any way to set the clipping of its content like the form does.  I have set the form equal to the width and height of the containing NavigatorContent and this seems to create the desired functionality but doesn't seem like the proper way for this to work.

       

           <mx:Accordion width="200" height="100" >
                <s:NavigatorContent  id="nc1" label="Accordion Pane 1" width="100%" height="100%">
      
                     <mx:Form>
                          <mx:FormItem label="TEST 1">
                               <s:Label text="IDK"/>
                          </mx:FormItem>
                          <mx:FormItem label="TEST 2">
                               <s:Label text="IDK"/>
                          </mx:FormItem>
                          <mx:FormItem label="TEST 3">
                               <s:Label text="IDK"/>
                          </mx:FormItem>
                          <mx:FormItem label="TEST 4">
                               <s:Label text="IDK"/>
                          </mx:FormItem>
                          <mx:FormItem label="TEST 5">
                               <s:Label text="IDK"/>
                          </mx:FormItem>
                          <mx:FormItem label="TEST 6">
                               <s:Label text="IDK"/>
                          </mx:FormItem>
                     </mx:Form>
      
                </s:NavigatorContent>
                
                <s:NavigatorContent label="Accordion Pane 1" width="100%" height="100%">
                     <s:Label text="Page 2"/>
                </s:NavigatorContent>
                
           </mx:Accordion>
      

       

       

      If i use Flex 3 method of an accordion and just us the Form container instead of NavigatorContent then it seems to work properly.

       

           <mx:Accordion width="200" height="200"  x="0" y="43">
      
                <mx:Form width="100%" height="100%">
                     <mx:FormItem label="TEST 1">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 2">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 3">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 4">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 5">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 6">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 7">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 8">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 9">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 10">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 11">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 12">
                          <s:Label text="IDK"/>
                     </mx:FormItem>                    
                </mx:Form>
                          
                <mx:Form width="100%" height="100%"> 
                     <mx:FormItem label="TEST 4444444">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 2">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 3">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 4">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 5">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 6">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 7">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 8">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 9">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 10">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 11">
                          <s:Label text="IDK"/>
                     </mx:FormItem>
                     <mx:FormItem label="TEST 12">
                          <s:Label text="IDK"/>
                     </mx:FormItem>                    
                </mx:Form>     
                
           </mx:Accordion>
      

       

      Does anyone know why I get this behaviour?

        • 1. Re: Flex 4 NavigatorContent containing a Form issue
          Flex harUI Adobe Employee

          Did you try clipAndEnableScrolling=true?

          • 2. Re: Flex 4 NavigatorContent containing a Form issue
            RobX82 Level 1

            clipAndEnableScrolling is not a property of NavigatorContent or the Accordion.

             

            I have tried setting the form itself to clipContent="true" but it still has the same behavior of the form items going outside the NavigatorContent and Accordion.

            • 3. Re: Flex 4 NavigatorContent containing a Form issue
              Peter deHaan Level 4

              Wrap your form in an s:Scroller:

               

              <?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">
                  
                  <mx:Accordion width="200" height="100" >
                      <s:NavigatorContent  id="nc1" label="Accordion Pane 1" width="100%" height="100%">
                          <s:Scroller width="100%" height="100%">
                              <s:Group>
                                  <mx:Form>
                                      <mx:FormItem label="TEST 1">
                                          <s:Label text="IDK"/>
                                      </mx:FormItem>
                                      <mx:FormItem label="TEST 2">
                                          <s:Label text="IDK"/>
                                      </mx:FormItem>
                                      <mx:FormItem label="TEST 3">
                                          <s:Label text="IDK"/>
                                      </mx:FormItem>
                                      <mx:FormItem label="TEST 4">
                                          <s:Label text="IDK"/>
                                      </mx:FormItem>
                                      <mx:FormItem label="TEST 5">
                                          <s:Label text="IDK"/>
                                      </mx:FormItem>
                                      <mx:FormItem label="TEST 6">
                                          <s:Label text="IDK"/>
                                      </mx:FormItem>
                                  </mx:Form>
                              </s:Group>
                          </s:Scroller>
                      </s:NavigatorContent>
                      
                      <s:NavigatorContent label="Accordion Pane 1" width="100%" height="100%">
                          <s:Label text="Page 2"/>
                      </s:NavigatorContent>
                  </mx:Accordion>
                  
              </s:Application>
              

               

              Peter

              • 4. Re: Flex 4 NavigatorContent containing a Form issue
                RobX82 Level 1

                Peter,

                 

                That appears to work but may I ask why it is necessary to do this instead of NavigatorContent already having this functionality already built into itself?  Also which would be better, using our suggestion or setting the form's height and width equal to that of the NavigatorContent's and setting the forms ClipContent="true"?

                 

                Thanks

                • 5. Re: Flex 4 NavigatorContent containing a Form issue
                  Peter deHaan Level 4

                  I think the logic is that scrolling was now opt-in instead of always adding the scrollbar overhead.

                   

                  I dont know which solution is "better". I'd just go with whatever works best for you. Or you could always set the resizeToContent flag to true and have the Accordion auto-size to match its currently selected contents:

                   

                  <?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">
                      
                      <mx:Accordion minWidth="200" minHeight="100" resizeToContent="true">
                          <s:NavigatorContent id="nc1" label="Accordion Pane 1">
                              <mx:Form>
                                  <mx:FormItem label="TEST 1">
                                      <s:Label text="IDK"/>
                                  </mx:FormItem>
                                  <mx:FormItem label="TEST 2">
                                      <s:Label text="IDK"/>
                                  </mx:FormItem>
                                  <mx:FormItem label="TEST 3">
                                      <s:Label text="IDK"/>
                                  </mx:FormItem>
                                  <mx:FormItem label="TEST 4">
                                      <s:Label text="IDK"/>
                                  </mx:FormItem>
                                  <mx:FormItem label="TEST 5">
                                      <s:Label text="IDK"/>
                                  </mx:FormItem>
                                  <mx:FormItem label="TEST 6">
                                      <s:Label text="IDK"/>
                                  </mx:FormItem>
                              </mx:Form>
                          </s:NavigatorContent>
                          
                          <s:NavigatorContent label="Accordion Pane 1">
                              <s:Label text="Page 2"/>
                          </s:NavigatorContent>
                      </mx:Accordion>
                      
                  </s:Application>
                  

                   

                  Peter

                  • 6. Re: Flex 4 NavigatorContent containing a Form issue
                    jpwrunyan Level 1

                    I assume despite the apparent tag-overhead, that this is still more lightweight than using the mx package equivalent...