14 Replies Latest reply on Nov 30, 2006 12:45 PM by cardinalsupport

    How to get Vertical Scrollbar to show up for Panel

    cardinalsupport Level 1
      Hi there, Im a Flex Newbie and am working on my first application for a client. I am having the hardest time getting a vertical scrollbar to work for a Panel control i am using. Here is the rundown:

      1- I have an application control with layout set to horizontal
      2- I have a Vbox on the left with 2 panels on top of each other,
      3- I have a Panel on the right with a bunch of text controls one right on top of another.

      the app looks like this. think of the spaced dashes and just spaces since this wont let me use spaces:

      ______________________
      | - - - - - - - - -| - - - - text - - - - |
      | - - - - - - - - -| - - - - text - - - - |
      | - - - - - - - - -| - - - - text - - - - |
      | ---------------| - - - - text - - - - |
      | - - - - - - - - -| - - - - text - - - - | - browser window ends here
      | - - - - - - - - -| - - - - text - - - - |
      | - - - - - - - - -| - - - - text - - - - |
      ______________________


      MY PROBLEM: I would like the application to stay confined to the browser window and have scrollbars appear in the right Panel when the text controls have content that is too long for the browser window. Yet i cannot get it to work, ive tried using clipContent=true and enabling verticalScrollPolicy but nothing seems to make the Panel on the right contrain to the height of the browser window.

      I have a feeling this is something really simple so any help would be GREATLY APPRECIATED!

      best
      stephen
        • 1. Re: How to get Vertical Scrollbar to show up for Panel
          cardinalsupport Level 1
          NOTE: The Vbox and the Panels are all set to width="100%" and height="100%"
          • 2. Re: How to get Vertical Scrollbar to show up for Panel
            Josh Johnson Level 1
            So does your MXML look like this...

            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="horizontal">
            <mx:VBox width="100%" height="100%">
            <mx:Panel width="100%" height="100%" layout="absolute">
            </mx:Panel>
            <mx:Panel width="100%" height="100%" layout="absolute">
            </mx:Panel>
            </mx:VBox>
            <mx:Panel width="100%" height="100%" layout="absolute">
            </mx:Panel>
            </mx:Application>

            I did a quick test on this where I filled up the last panel with a variety of text items, and it seems to behave just like you want.
            • 3. Re: How to get Vertical Scrollbar to show up for Panel
              cardinalsupport Level 1
              Thanks for the reply Josh! Actually its pretty similar but i dont have any layout specified. Do i have to use absolute layout to get the scroll bar to show up? Here is an example of what I have:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="horizontal">
              <mx:VBox width="100%" height="100%">
              <mx:Panel width="100%" height="100%">
              </mx:Panel>
              <mx:Panel width="100%" height="100%">
              </mx:Panel>
              </mx:VBox>
              <mx:Panel width="100%" height="100%">
              <mx:Text styleName="paraText" width="100%">
              <mx:htmlText>
              <![CDATA[Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>]]>
              </mx:htmlText>
              </mx:Text>
              </mx:Panel>
              </mx:Application>
              • 4. Re: How to get Vertical Scrollbar to show up for Panel
                cardinalsupport Level 1
                Hoping someone else might be able to look at this post. I know its probably something very simple, any help would be greatly appreciated! :)
                • 5. Re: How to get Vertical Scrollbar to show up for Panel
                  DaniOrama9
                  I don't understand exactly what do you want, please especify... Do you want an ScrollBar for the whole aplication, for the right panel or for the text inside the panel? If you want something to resize using absolute layout is working nice nearly always. If you want an ScrollBar just create a content bigger as the container, using 100% would not work. If what you want is just scrolling the text what Josh answered worked perfectly, just try it: (I include the code from Josh with your text)

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="horizontal">
                  <mx:VBox width="100%" height="100%">
                  <mx:Panel width="100%" height="100%" layout="absolute">
                  </mx:Panel>
                  <mx:Panel width="100%" height="100%" layout="absolute">
                  </mx:Panel>
                  </mx:VBox>
                  <mx:Panel width="100%" height="100%" layout="absolute">
                  <mx:Text styleName="paraText" width="100%">
                  <mx:htmlText>
                  <![CDATA[Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments.<br><br>Plant floor operators, managers, and other individuals whose jobs include using IndustrialSQL Server™ Historian data for assessment and/or reporting within production or administrative environments<br><br>]]>
                  </mx:htmlText>
                  </mx:Text>
                  </mx:Panel>
                  </mx:Application>

                  • 6. Re: How to get Vertical Scrollbar to show up for Panel
                    ur_dtrain Level 1
                    Instead of using height = 100%, if you set constraints on the panel to be top="0" and bottom="0" it will always resize with the application.
                    • 7. Re: How to get Vertical Scrollbar to show up for Panel
                      cardinalsupport Level 1
                      Thanks dani and darin for helping out! Yes what i need is the Right Panel to be able to Scroll vertically when text is placed in it that is longer than the window. So Yes Josh's example does work, unfortunately it only works if i have ONE control in there. But I have 3 or 4 controls and do not want to have to explicitly place them by x/y coordinate which is required if i use absolute. is there any other way? For example this is without absolute:

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="horizontal">
                      <mx:VBox width="100%" height="100%">
                      <mx:Panel width="100%" height="100%">
                      </mx:Panel>
                      <mx:Panel width="100%" height="100%">
                      </mx:Panel>
                      </mx:VBox>
                      <mx:Panel width="100%" height="100%">
                      <mx:Text styleName="paraText" width="100%">
                      <mx:htmlText>
                      <![CDATA[Page 1<br><br>Here is a bunch of text in a single text control<br><br>]]>
                      </mx:htmlText>
                      </mx:Text>
                      <mx:Text styleName="paraText" width="100%">
                      <mx:htmlText>
                      <![CDATA[And below it is another text control filled with more text<br><br>asdasd asdawdd wad wadmdwad mildm awdn i niawfnaf nawfn awfn awifn awf<br><br>adsadwadwadawd<br><br>asdadwavawvvawvaw<br><br>]]>
                      </mx:htmlText>
                      </mx:Text>
                      <mx:Text styleName="paraText" width="100%">
                      <mx:htmlText>
                      <![CDATA[And Finally a 3rd Text control filled with other text<br><br>asdasdsav<br><br>asdasdsadwninib<br><br>awnvndzln<br><br>qwanil<br><br>asbnil nl<br><br>]]>
                      </mx:htmlText>
                      </mx:Text>
                      </mx:Panel>
                      </mx:Application>

                      IF I put absolute in there it just overlaps the controls which doesnt work. Any ideas? Thanks again!

                      best
                      stephen
                      • 8. Re: How to get Vertical Scrollbar to show up for Panel
                        ur_dtrain Level 1
                        wrap the VBox and the panel in an HBox
                        <mx:HBox>
                        <mx:VBox>
                        .....
                        </mx:VBox>
                        <mx:Panel/>
                        </mx:HBox>

                        This will provide horizontal seperation, or you set both widths to 50% and pin them by setting the VBox left="0" and the lone Panel right="0".
                        • 9. Re: How to get Vertical Scrollbar to show up for Panel
                          cardinalsupport Level 1
                          ok tried wrapping with an hbox and just squished it all into the middle. here is a view:

                          http://host.cardinalweb.com/flex/test.html

                          did i miss something?
                          s
                          • 10. Re: How to get Vertical Scrollbar to show up for Panel
                            ur_dtrain Level 1
                            you are inches away... :) set the HBox width="100%"
                            • 11. Re: How to get Vertical Scrollbar to show up for Panel
                              cardinalsupport Level 1
                              thanks to you! ok i set it to 100% but still no vert scroll on the right panel :(
                              here is the link:

                              http://host.cardinalweb.com/flex/test.html

                              and the MXML:

                              <?xml version="1.0" encoding="utf-8"?>
                              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="horizontal">
                              <mx:HBox width="100%">
                              <mx:VBox width="100%" height="100%">
                              <mx:Panel width="100%" height="100%">
                              </mx:Panel>
                              <mx:Panel width="100%" height="100%">
                              </mx:Panel>
                              </mx:VBox>
                              <mx:Panel width="100%" height="100%">
                              <mx:Text styleName="paraText" width="100%">
                              <mx:htmlText>
                              <![CDATA[Page 1<br><br>Here is a bunch of text in a single text control<br><br>]]>
                              </mx:htmlText>
                              </mx:Text>
                              <mx:Text styleName="paraText" width="100%">
                              <mx:htmlText>
                              <![CDATA[And below it is another text control filled with more text<br><br>asdasd asdawdd wad wadmdwad mildm awdn i niawfnaf nawfn awfn awifn awf<br><br>adsadwadwadawd<br><br>asdadwavawvvawvaw<br><br>]]>
                              </mx:htmlText>
                              </mx:Text>
                              <mx:Text styleName="paraText" width="100%">
                              <mx:htmlText>
                              <![CDATA[And Finally a 3rd Text control filled with other text<br><br>asdasdsav<br><br>asdasdsadwninib<br><br>awnvndzln<br><br>qwanil<br><br>asbnil nl<br><br>]]>
                              </mx:htmlText>
                              </mx:Text>
                              </mx:Panel>
                              </mx:HBox>
                              </mx:Application>
                              • 12. Re: How to get Vertical Scrollbar to show up for Panel
                                ur_dtrain Level 1
                                Hrrmmm... You shouldn't have to but, set the verticalScrollPolicy="on" (or "auto"). oh, and nest all of the Text fields within the panel inside a VBox, otherwise they will overlap.
                                • 13. Re: How to get Vertical Scrollbar to show up for Panel
                                  ur_dtrain Level 1
                                  Looks like at present it wouldn't/shouldn't be scrolling since all data from your source above is being displayed, try adding more rows of text to see if will scroll when you do.
                                  • 14. Re: How to get Vertical Scrollbar to show up for Panel
                                    cardinalsupport Level 1
                                    GOT IT! Thanks Darin for working through this with me. Looks liike I dont really need the Hbox, if make the Panel layout="absolute" as josh suggested. Then wrap all the text controls with a vbox, viola! i get the scrolling as intended! here is the final MXML:

                                    <?xml version="1.0" encoding="utf-8"?>
                                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="horizontal">
                                    <mx:VBox width="100%" height="100%">
                                    <mx:Panel width="100%" height="100%">
                                    </mx:Panel>
                                    <mx:Panel width="100%" height="100%">
                                    </mx:Panel>
                                    </mx:VBox>
                                    <mx:Panel width="100%" height="100%" layout="absolute">
                                    <mx:VBox width="100%" height="100%">
                                    <mx:Text styleName="paraText" width="100%">
                                    <mx:htmlText>
                                    <![CDATA[Page 1<br><br>Here is a bunch of text in a single text control<br><br>]]>
                                    </mx:htmlText>
                                    </mx:Text>
                                    <mx:Text styleName="paraText" width="100%">
                                    <mx:htmlText>
                                    <![CDATA[And below it is another text control filled with more text<br><br>asdasd asdawdd wad wadmdwad mildm awdn i niawfnaf nawfn awfn awifn awf<br><br>adsadwadwadawd<br><br>asdadwavawvvawvaw<br><br>]]>
                                    </mx:htmlText>
                                    </mx:Text>
                                    <mx:Text styleName="paraText" width="100%">
                                    <mx:htmlText>
                                    <![CDATA[And Finally a 3rd Text control filled with other text<br><br>asdasdsav<br><br>asdasdsadwninib<br><br>awnvndzln<br><br>qwanil<br><br>asbnil nl<br><br>]]>
                                    </mx:htmlText>
                                    </mx:Text>
                                    </mx:VBox>
                                    </mx:Panel>
                                    </mx:Application>

                                    THANKS SO MUCH!
                                    s