Flex Component Width

I have created an ItemRenderer for the Spark List component with the following code.

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">

    <s:Ric开发者_StackOverflow中文版hText left="10" top="10" bottom="10" paddingBottom="0" paddingLeft="0"
                paddingRight="0" paddingTop="0" text="{data[1].toString()}" textAlign="left"
                verticalAlign="middle" width="{parentDocument.width*0.96}"/>

</s:ItemRenderer>

The problem is that when too much data is passed, the List controller displays scrollbars. Adding right="10" does not work. I need a way so that no scrollbars are present at any size (this is an AIR application).

---

The List component consists of scroll bar itself. You can use DataGroup (same input parameter such as itemRenderer="" and dataProvider="" with List), and remember to set parameter clipAndEnableScrolling="true".

This way also introduces new potential problem. When you have large amount of data, you cannot scroll up and down automatically. However, you can listen to mouseEvent to do it manually, or can add customized ScrollBar at anywhere in your application (set viewport="yourDataGroup").

---

Based on the comments for the op, it seems you have a problem with how you are laying out your item renderer.

1. Set the percentWidth of your item renderer to 100 (alternatively width=100%)
2. Set the percentWidth of your RichText to 100 (again, you can use width=100%)
3. Remove the left, top and bottom constraints.

Those two steps should get rid of your horizontal scroll bar problem. If it continues you can try the nuclear option and set horizontalScrollPolicy=off on your List.

---

Also you should consider setting the maxWidth property of your renderer to prevent it from getting bigger than your list.

---

Speaking about RichText (and scrollbars inside itemrenderer), setting minHeight="0" and minWidth="0" in RichText may solve the problem - the text will be cut. variableRowHeight="true" in List will make itemRenderers their own calculated size.

If you want List to always show all of its items, try to bind rowCount to your dataProvider length, say rowCount="{Math.max(arrayOfDataToDisplay.length, 5)}".

---

This code did the job.

        protected function ItemRenderer_Init(event:FlexEvent):void {
            setInterval(ResizeRenderer, 50);
        }

        private function ResizeRenderer():void {
            richtext.width = parentApplication.width-535;
        }