VScrollbar is not visible untill it is clicked - apache-flex

What should be added in order to the vertical scrollbar to be visible without to be clicked or touched ? Here is image of screen :
Here is code :
<s:Scroller width="100%" height="100%">
<s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center">
<s:TextInput id="chp1" width="50%"/>
<s:TextInput id="chp2" width="50%"/>
<s:Button label="Enregistrer" click="enregistrer(event)" styleName="btn"/>
<s:Label/>
<s:Button label="Lire" click="lire(event)" styleName="btn" />
<s:TextArea id="area"/>
<s:Label/>
<s:HGroup>
<s:Button label="Envoyer" click="send(event)" styleName="btn" />
<s:Button label="Retour" click="navigator.popView()" styleName="btn" />
</s:HGroup>
<s:TextArea id="resultHTTP"/>
<s:TextInput id="h_url" text="{url}" visible="false"/>
</s:VGroup>
</s:Scroller>
As you see the vertical scrollbar at the right of the screen is not visible. So how to make it visible anytime ?


Please try this, on your scroller:
verticalScrollPolicy = "on"
Update:
What about trying this:
interactionMode="mouse"
;)

Related

How to enable vertical scroll in a flex mobile View?

At runtime when I click the Lire button then the TextArea field under it is populated from a sharedobject data and the display becomes bigger :
Here is code :
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" title=""
creationComplete="creationCompleteHandler(event)" >
...
<s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center">
<s:TextInput id="chp1" width="50%"/>
<s:TextInput id="chp2" width="50%"/>
<s:Button label="Enregistrer" click="enregistrer(event)" />
<s:Label/>
<s:Button label="Lire" click="lire(event)" />
<s:TextArea id="area"/>
<s:Label/>
<s:HGroup>
<s:Button label="Envoyer" click="send(event)" />
<s:Button label="Retour" click="navigator.popView()" />
</s:HGroup>
<s:TextArea id="resultHTTP"/>
<s:TextInput id="h_url" text="{url}" visible="false"/>
</s:VGroup>
How to enable vertical scroll then to view others components at the bottom ?

wrap your VGroup with a scroller. something like this:
's:Scroller width="100%" height="100%"
s:VGroup width="100%" height="100%" paddingTop="5" verticalAlign="middle" horizontalAlign="center"'

Flex 4 scroller with group. Scrollbars not showing up

I know I have done this before but every time I work with scrollers and group it doesn't work for me and kills my 2 days.
<s:Scroller width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">
<s:Group clipAndEnableScrolling="true">...... ..... </s:Group></s:Scroller>
This is what I have. I have components inside my group with is more than enough to bring scrollers even on a big monitor. But I am not getting any scrollbars.
Kindly tell me what is that I am doing wrong here. because everytime I fix it and I struggle for the next time.
Thanks.

Try with this
Your scroller parent container need to set non-percentage height/width.
<s:BorderContainer width="120" height="100" backgroundColor="#FFFFFF">
<s:Scroller width="100%" height="100%">
<s:Group>
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
clipAndEnableScrolling="true" />
</s:layout>
<s:Button label="button (1)" />
<s:Button label="button (2)" />
<s:Button label="button (3)" />
<s:Button label="button (4)" />
<s:Button label="button (5)" />
<s:Button label="button (6)" />
</s:Group>
</s:Scroller>
</s:BorderContainer>

Thank you for all your responses. After setting the minHeight it now works. I am able to achieve the scrollbars as expected (make it look like browser's scroll bar). Below is the code snippet
<s:Scroller width="100%" maxHeight="{this.height}">
<s:VGroup width="100%" minHeight="1000" height="100%" paddingLeft="40" paddingRight="40" paddingTop="0" >
..</s:VGroup></s:Scroller>
Kindly let me know if there is a better approach.

The Same code given by "Raja Jaganathan" itself will work with small modification on scroll parent height and width
Capabilities.screenResolutionX, Capabilities.screenResolutionY will give you the browser width and height respectively.

panel get unknown width

I have a Hgroup that contains of four panels. Sometimes it happens then when users open it the panls have a unknown width even bigger than the window resolution.
does anyone know what the problem is or how to solve it?
<s:Scroller width="100%" height="100%" >
<s:Group width="100%" height="100%">
<s:VGroup gap="10" width="100%">
<s:TextInput/>
<s:Line width="100%"><s:stroke><s:SolidColorStroke color="#696969"/></s:stroke></s:Line>
<s:HGroup gap="20" width="100%">
<s:Panel width="100%"/>
<s:Panel width="100%"/>
<s:Panel width="100%"/>
<s:Panel width="100%"/>
</s:HGroup>
<s:TextInput/>
</s:VGroup>
</s:Group>
</s:Scroller>

it seems that the User who was testing it was using an older version of the flash player! updating this. fixed the problem.

Adding two icons on left and right on spark button

I want to add two icons on spark button.I am using button skin.
But the icons are not coming properly. Do anyone is having any idea?
The code is:
<s:HGroup width="100%">
<s:HGroup id="iconContainer" top="1" bottom="1" left="0" right="0"
horizontalAlign="{iconPosition}" verticalAlign="middle">
<mx:Image id="iconImage" source="{icon}" />
</s:HGroup>
<s:HGroup id="decoratorContainer"
width="100%">
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="1"
left="0" right="0" top="2" bottom="2">
</s:Label>
<mx:Image id="image" source="{decorator}" />
</s:HGroup>
</s:HGroup>

Give absolute width and height to 'iconImage' and 'image' OR override commitProperties by calling invalidateProperties once the image size is known by the works of {Binding}. Hope it helped.

Flex Spark: How to right align an icon on a button or tabbar button?

I would like to right align an icon on a button or tabbarbutton and keep the text left aligned in Flex 4.0 Spark.
So far, I've come up with something like the following in my custom skin:
<s:HGroup>
<s:HGroup horizontalAlign="left">
<s:Label id="labelDisplay"
textAlign="left"
maxDisplayedLines="1"
top="10">
</s:Label>
</s:HGroup>
<s:HGroup horizontalAlign="right" bottom="5" right="0">
<s:BitmapImage source="#Embed('assets/images/icons/close.png')" />
</s:HGroup>
</s:HGroup>
But it seems silly to have an HGroup with 2 HGroup children just to get the horizontalAlign to the right.
Anyone know of a better way?
Thx,
=Dave

You could set the width of the label to be 100%.
<s:HGroup>
<s:Label id="labelDisplay" width="100%"/>
<s:BitmapImage source="#Embed('assets/images/icons/close.png')" />
</s:HGroup>
If your buttons are all an explicit width, you could also try something like this:
<s:HGroup>
<s:Label id="labelDisplay"/>
<mx:Spacer width="100%"/>
<s:BitmapImage source="#Embed('assets/images/icons/close.png')" />
</s:HGroup>

Resources