Nativescript: Let child view overflow AbsoluteLayout parent on Android

[terreb]

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 2.0.0
• Cross-platform modules: 2.0.0
• Runtime(s): tns-android 2.0.0
  

  Please tell us how to recreate the issue in as much detail as possible.

Please try to test the below markup on iOS and Android. You will notice that the child view overflows the parent on iOS, but not on Android. Expected behaviour: the child view should overflow the parent if the parent is AbsoluteLayout.

iOS:

Android:

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<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>

[tsonevn]

Hi @terreb ,
Thank your for your issue,
In my opinion this is normal behavior for Android. As a solution you could use second GridLayout in the AbsoluteLayout in your sample code and it will work in the same way for both Android and iOS. You could review the attached code below:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" >  
<StackLayout>
     <AbsoluteLayout row="0" col="0" width="200" height="200" backgroundColor="green">
        <GridLayout width="100" height="100" backgroundColor="red" top="0" left="20">
        </GridLayout>
        <GridLayout width="100" height="100" backgroundColor="blue" top="20" left="0">
        </GridLayout>
    </AbsoluteLayout>
 </StackLayout>
</Page>

I hope this helps.

[terreb]

Hi @tsonevn. Thank you for the reply. The thing is my example doesn't show the whole picture of what I'm trying to implement and your solution unfortunately doesn't help. In the real app I've got a view which is positioned over a scroller. This view is draggable and has a certain dimensions. When it's clicked a child view which is inside is shown. This child view has much bigger size and hidden by default. I don't won't to wrap those both views inside a bigger wrapper, since I need to keep an overall small size of the view in order when the user clicks outside the view he interacts with the scroller. But if I have a transparent wrapper it will intercepts the user clicks and I will need to bubble them somehow to the scroller. So, to keep things as simpler as possible I just need the same behaviour on Android as on iOS : when the child view is shown it overlaps the parent. Also, the view can be dragged over the screen when the child view is collapsed. To prevent moving the view outside of the screen and outside some other elements I make calculations again based on its dimensions. The dimensions of the child view can change dynamically.

I suggest you guys consider this behaviour for Android too. This will be helpful considering you added support for PhysicsJS and such stuff can be widely used in games for example when the user drags a view inside AbsoluteLayout and there is need to go outside the bounds. With this css overflow property could be used to prevent going out of bounds if needed on both platforms.

Thanks.

[tsonevn]

Hi @terreb ,

Thank you for your answer.
Could your sent us some sample project, which we can use to review the behavior you needs.
Regards

[tsonevn]

Hi @terreb ,

In regard to your feature request for supporting PhysicsJS I found that we already support this feature. You could use this NativeScript plugin plugin, which allows you to use the whole PhysicsJS functionality. In addition you also could review the demo in this GitHub repo here.

I hope this is applicable for you.

[terreb]

Hi @tsonevn thank you for you replies. I know you guys already support PhysicsJS. I follow your progress:) What I meant is that behaviour of the child in AbsoluteLayout that I suggested would be a good bonus to PhysicsJS that you are already support. Plus would be great to have css overflow property to control this even better: set child items or their parts hidden when they go outside parent like it's now on Android or make them visible like it's now on iOS. The reason for this is that for now if we want to have dynamically dragged views the best place for them is inside AbsoluteLayout. We can use top and left properties to position them inside. Sometimes there are cases when we need those views to be positioned outside the parent (AbsoluteLayout) bounds and still be visible on the screen. I do realize that current behaviour is absolutely normal for Android, but would be great to make this more controllable by having css overflow property. Thanks.

[tsonevn]

Hi @terreb,

Excuse me for the delay in replying and thank you for your suggestion for supporting css overflow property. In regard to that you could open new issue where you are describing your feature request for overflow support. Furthermore other people could vote for this feature in the new issue.

Regards,
@tsonevn

[terreb]

Hi @tsonevn ok, thank you.

https://github.com/NativeScript/NativeScript/issues/2354

[carloscabral]

Any updates about this?

[tsonevn]

Hi @carloscabral
The issue is related to a missing feature, which is logged here.
You can also check the provided solution in this comment in the feature requests.

[ghost]

https://github.com/NativeScript/NativeScript/issues/2354#issuecomment-414930792

So its not available in _native_ - how should it become a _native_ feature?

[carloscabral]

Hi, @tsonevn. I tried the provided solution you've mentioned above but it doesn't work for me. However, I've managed to get this working by using native Android code for this problem:

if (app.android && platform.device.sdkVersion >= '21') { myView.android.setClipChildren(false) }

It would be great to have this featured exposed as a CSS overflow property in the upcoming version of NativeScript.

Thank you for answering!

[ghost]

I am not sure, maybe i tried clipChildren and it doesn't work as aspected overall. Is longer time ago. But if it would do the trick it would be great

[carloscabral]

@BenDietze you have to put this method in the parent(s) of the object. It is working like a charm for me now. iOS and Android sharing the same layout.

[ghost]

@carloscabral 💯

Ah, ok, might be is SDK >= 21 ? I remember when testing i had < 21 - but today - thats great news!

Thanks 👍

[mudlabs]

From my experiment the native android solution _( from @carloscabral )_ works, and needs to be applied to the target views grandparent.

Also RE original post, it's worth noting that if the parent view has a background the child will be clipped. This issue is resolved by the native solution though _(haven't checked iOS native solution)_.

[SephReed]

This would be a very helpful addition in order to keep the results of ios and android the same. Either making apple clip by default, or android not.

[szhatef]

clipToBound works, but if it set as true, and parent has borderRadius, {N} neglect the space between parent and child!

https://github.com/NativeScript/NativeScript/issues/8929