JoshDSommer / nativescript-ngx-shadow

Angular directive to apply shadows to native elements according to the elevation level guidelines of material design specification
Apache License 2.0
9 stars 6 forks source link

iOS Shadow applying to child #17

Open darkmantle opened 5 years ago

darkmantle commented 5 years ago

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 commented 5 years ago

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

darkmantle commented 5 years ago

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 commented 4 years ago

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.