NativeScript: Css overflow property support

Currently if a child view overflows its parent iOS and Android behaves differently. iOS shows the child overflowed parts while Android doesn’t. In order to make this controllable it would be great to introduce css overflow property.

To see what I mean please try the next on iOS and Android:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
 <GridLayout>
    <AbsoluteLayout width="100" height="100" backgroundColor="green">
        <GridLayout width="100" height="100" backgroundColor="red" top="20" left="-20">
        </GridLayout>
    </AbsoluteLayout>
 </GridLayout>
</Page>

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

About this issue

Original URL
State: open
Created 8 years ago
Reactions: 20
Comments: 22 (3 by maintainers)

Most upvoted comments

poul-kg on May 20, 2017

We moved to fusetools framework. Pixel perfect on both ios and andriod

poul-kg on Feb 6, 2018

Would be really usefull indeed

jeremypele on Aug 2, 2017

@NickIliev your solution doesn’t achieve the overflow functionality. What overflow should achieve is that it allows one layout/object to be seen/selectable if its position exceeds the boundaries of its parent layout.

Unfortunately z-index doesn’t help for this sort of problem either.

snq on Jul 3, 2018

Hey @terreb you can achieve overflow even now using an AbsoluteLayout for parent container and adjusting your child elements flow according to it.

For example:

    <AbsoluteLayout width="400" height="400">
        <GridLayout width="200" height="200" backgroundColor="red" id="mr-red" top="20" left="20"/>
        <GridLayout width="200" height="200" backgroundColor="green" id="mr-green" />
        <GridLayout width="50" height="50" backgroundColor="blue" id="mr-blue"  top="210" left="50"/>
    </AbsoluteLayout>

NickIliev on Jun 23, 2016