3 Replies Latest reply on Apr 15, 2011 2:59 PM by Flex harUI

    Select row in spark List with vertical layout

    VisKevin

      Hi,

       

      I have a s:List control that uses a VerticalLayout so that I can limit the number of visible rows using requestedRowCount.  Before adding the VerticalLayout, if I wanted to select an item in the List, I could click anywhere on that item's row, and the entire row was highlighted.  Now that I have the VerticalLayout in place, I can only click on the text of the item, and only the text is highlighted, not the entire row.

       

      Is there any way to change this behavior so that I can click anywhere in a row in order to select an item again?  I looked through the List properties and styles, as well as the VerticalLayout properties, and didn't see any that looked like they would do the trick.

       

      Thanks in advance,

      Kevin

        • 1. Re: Select row in spark List with vertical layout
          Flex harUI Adobe Employee

          s:List has a VerticalLayout by default.  Maybe post a 20-line test case so

          we can see what you are doing.

          • 2. Re: Select row in spark List with vertical layout
            VisKevin Level 1

            Alex,

             

            Thanks for the quick response.  Here's a simple example of what I'm talking about.  Run this simple list code inside of an application, using the default Spark theme:

             

                <s:List>
                    <s:dataProvider>
                        <s:ArrayCollection>
                            <fx:Object>
                                <fx:label>Item 1</fx:label>
                            </fx:Object>
                            <fx:Object>
                                <fx:label>Item 2</fx:label>
                            </fx:Object>
                            <fx:Object>
                                <fx:label>Item 3</fx:label>
                            </fx:Object>
                        </s:ArrayCollection>
                    </s:dataProvider>
                </s:List>

             

            You'll notice that you can click on any part of the row to select an item, and the entire row is highlighted.  Now add a layout tag and set it to VerticalLayout, like so:

             

                <s:List>
                    <s:dataProvider>
                        <s:ArrayCollection>
                            <fx:Object>
                                <fx:label>Item 1</fx:label>
                            </fx:Object>
                            <fx:Object>
                                <fx:label>Item 2</fx:label>
                            </fx:Object>
                            <fx:Object>
                                <fx:label>Item 3</fx:label>
                            </fx:Object>
                        </s:ArrayCollection>
                    </s:dataProvider>
                    <s:layout>
                        <s:VerticalLayout/>
                    </s:layout>
                </s:List>

             

            Test out the list control again, and you'll see that you can no longer click in the empty space to the right of "Item 1" in order to select that item - you have to click on the text itself.  When you do select it, only the text is highlighted, not the entire row as before.

             

            FYI, I'm adding the VerticalLayout because I need to set the requestedRowCount.  Sometimes my List's data provider can get pretty long and I want to guarantee that the List will only take up a fixed amount of vertical space.

             

            The change in behavior after I add the VerticalLayout is undesirable because the first item in my list is always a single space character that's selected by default, which of course doesn't look too good when only the text is selected.  I suppose I could display a longer string of spaces, but I'd still rather be able to select/highlight the entire row instead.

            • 3. Re: Select row in spark List with vertical layout
              Flex harUI Adobe Employee

              So one of my "rules" for Spark is that, since the skins control the visuals,

              if you're not getting the visuals you want, examine the default skin and

              compare.  In the List skin you should see that the verticalLayout has a

              horizontalAlign property.