You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Angelo Anolin <an...@gmail.com> on 2014/07/26 06:54:31 UTC

Pushing Items and Controls to Bottom of Mobile View

Hi,

Can someone point me in the right direction regarding making some items /
controls in a view of my mobile application to align to the bottom?

My MXML code for the view is as follows:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
 title="Test Module"
initialize="testModule_initializeHandler(event)">
 <s:layout>
 <s:VerticalLayout/>
</s:layout>
 <s:navigationContent>
 <s:Button label="Back" click="navigator.popView()"/>
</s:navigationContent>
 <s:VGroup height="100%" width="100%">
 <!-- Using this to fill up all the top space.-->
</s:VGroup>
 <s:List id="list" left="0" right="0" width="100%" height="100%">
 </s:List>
</s:View>


But for some reason, the items rendered on the list has some space left
below it. I was looking to make sure the list aligns to the bottom of the
view.

Appreciate any insight. Thanks.

Re: Pushing Items and Controls to Bottom of Mobile View

Posted by OmPrakash Muppirala <bi...@gmail.com>.
Probably set paddingBottom on the layout?

Thanks,
Om
On Jul 25, 2014 9:55 PM, "Angelo Anolin" <an...@gmail.com> wrote:

> Hi,
>
> Can someone point me in the right direction regarding making some items /
> controls in a view of my mobile application to align to the bottom?
>
> My MXML code for the view is as follows:
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
>  title="Test Module"
> initialize="testModule_initializeHandler(event)">
>  <s:layout>
>  <s:VerticalLayout/>
> </s:layout>
>  <s:navigationContent>
>  <s:Button label="Back" click="navigator.popView()"/>
> </s:navigationContent>
>  <s:VGroup height="100%" width="100%">
>  <!-- Using this to fill up all the top space.-->
> </s:VGroup>
>  <s:List id="list" left="0" right="0" width="100%" height="100%">
>  </s:List>
> </s:View>
>
>
> But for some reason, the items rendered on the list has some space left
> below it. I was looking to make sure the list aligns to the bottom of the
> view.
>
> Appreciate any insight. Thanks.
>

Re: Pushing Items and Controls to Bottom of Mobile View

Posted by Angelo Anolin <an...@gmail.com>.
Thank you @neverbirth. I used the suggestions you've provided and worked
like a charm.


On Sat, Jul 26, 2014 at 3:38 AM, Neverbirth <ne...@gmail.com> wrote:

> I misread the OP, aside from the things I mentioned above, you'd have to
> set
> your list to use a custom layout, or something along the lines. The list is
> populated from top to bottom, so if its height is bigger than the items
> displayed, it will leave some space below. So you can make:
>
>  <s:List id="list" left="0" right="0" width="100%" height="100%">
>      <s:layout>
>         <s:VerticalLayout horizontalAlign="contentJustify" gap="0"
> verticalAlign="bottom" variableRowHeight="false"/>
>     </s:layout>
> </s:List>
>
> Also, you sure you want to make height="100%"? If so, the previous
> bottom="0" I mentioned isn't needed, as the list will fill the whole view
> height.
>
>
>
> --
> View this message in context:
> http://apache-flex-users.2333346.n4.nabble.com/Pushing-Items-and-Controls-to-Bottom-of-Mobile-View-tp7395p7399.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>

Re: Pushing Items and Controls to Bottom of Mobile View

Posted by Neverbirth <ne...@gmail.com>.
I misread the OP, aside from the things I mentioned above, you'd have to set
your list to use a custom layout, or something along the lines. The list is
populated from top to bottom, so if its height is bigger than the items
displayed, it will leave some space below. So you can make:

 <s:List id="list" left="0" right="0" width="100%" height="100%"> 
     <s:layout>
        <s:VerticalLayout horizontalAlign="contentJustify" gap="0"
verticalAlign="bottom" variableRowHeight="false"/>
    </s:layout>
</s:List> 

Also, you sure you want to make height="100%"? If so, the previous
bottom="0" I mentioned isn't needed, as the list will fill the whole view
height.



--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Pushing-Items-and-Controls-to-Bottom-of-Mobile-View-tp7395p7399.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.

Re: Pushing Items and Controls to Bottom of Mobile View

Posted by Neverbirth <ne...@gmail.com>.
First, remove that empty VGroup. Then, depending of what you actually want,
either set verticalAlign="bottom" to your VerticalLayout, or remove
completely your layout property, and set bottom="0" to your list.

Seeing you only have a List, I'd go with the second one.




--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Pushing-Items-and-Controls-to-Bottom-of-Mobile-View-tp7395p7398.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.