Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS Shadow applying to child #17

Open
darkmantle opened this issue Feb 27, 2019 · 3 comments
Open

iOS Shadow applying to child #17

darkmantle opened this issue Feb 27, 2019 · 3 comments

Comments

@darkmantle
Copy link

darkmantle commented Feb 27, 2019

This is happening on iOS, but not tested it on Android. Using latest versions of TNS, Angular and this plugin.

I have the following layout. If I put shadow/elevation onto the AbsoluteLayout it stops working and the layout no longer appears (it's a custom bottom sheet that appears on pressing a button). If I put the shadow onto the GridLayout it applies it to the children and not the GridLayout!

<AbsoluteLayout visibility="{{showPicker ? 'visible' : 'hidden'}}" #abLayout row="0">
            <GridLayout rows="auto, *" height="200" width="100%">
                <FlexboxLayout row="0" justifyContent="space-between" class="pickerBox">
                    <Label (tap)="dateCancel()" text="Cancel" class="pickerText"></Label>
                    <Label (tap)="dateSet()" text="Set" class="pickerText"></Label>
                </FlexboxLayout>
                <DatePicker (dateChange)="onDateChanged($event)" row="1" #datePick height="180"></DatePicker>
            </GridLayout>
        </AbsoluteLayout>
@edusperoni
Copy link

Try setting a background color to your layouts (can be transparent, I think, but try with a solid one), should sort things out

@darkmantle
Copy link
Author

My first mistake was that the AbsoluteLayout is full-width and at the bottom of the screen, so shadow would not be visible anyway. Same for GridLayout.

But even elevation doesn't work, with or without background colours still, same issue as above. The height of the AbsoluteLayout is set (programmatically) to 300, so there should be room for the elevation to show.

@jalbatross
Copy link

Not sure if you are still working on this, but I believe had a similar issue with using shadows for elements GridLayouts. It had to do with the way shadows are applied on iOS. Under the hood, shadow elements are wrapped in a StackLayout and then reinserted into their parent layout elements with the wrapper. Now the issue is that the wrapping StackLayout doesn't get the wrapped elements child properties, so if the child element was in a certain gridRow or gridColumn, it'll render in the wrong place.

I opened up a PR to address the issue for GridLayouts but it still needs some work to account for all of the different layout types.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants