No shadows on iOS

[erkanarslan]

Make sure to check the demo app(s) for sample usage

It doesn't build

If the demo apps cannot help and there is no issue for your problem, tell us about it

No shadows on iOS. I set the shadow with shadow="2" in xml file.

Which platform(s) does your issue occur on?

• iOS 11
• emulator and device

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

• CLI: 3.3.1
• Cross-platform modules: 3.3.0
• Runtime(s): 3.3.0 for iOS

[berardo]

Hi @erkanarslan, please try the just released version 2.0.0. This issue should be addressed. Otherwise, please let me know. Thanks

[erkanarslan]

Shadow is applied strangely both on iOS and Android.

Let me show you my xml and css codes first:

In this xml important thing is that there is a top element which contains two children: info box at the top which should have no shadow and a card that should have the shadow.

<stack-layout class="item" [visible]="!item.collapsed" shadow="10">
    <flexbox-layout class="top-info">
        <label class="fa item-icon" [ngClass]="iconColors[item.type]" [text]="icons[item.type]"></label>
        <label class="item-date" [text]="item.date | date:'d MMMM, HH:mm'"></label>
    </flexbox-layout>
    <stack-layout (tap)="itemTapped(item)" class="item-card">
        <flexbox-layout class="item-title">
            <label class="fa priority priority-{{item.priority}}-text" text="&#xf111;" [visible]="item.type != 'event'"></label>
            <label [text]="item.title"></label>
        </flexbox-layout>
        <flexbox-layout class="item-body">
            <label *ngIf="item.type == 'event'" class="fa" text="&#xf017;"></label>
            <label *ngIf="item.type == 'event' && !item.item.allDay" [text]="(item.item.start | date:'HH:mm') + (item.item.end ? ' - ' + (item.item.end | date:'HH:mm') : '')" class="mr8"></label>
            <label *ngIf="item.type == 'event' && item.item.allDay" text="Tüm Gün"></label>
            <label *ngIf="item.item.state" class="badge" [ngStyle]="{'background-color' : item.item.state.color, color : item.item.state.textColor}" [text]="item.item.state.name"></label>
            <label *ngIf="item.item.group" class="fa pl8" text="&#xf0c0;"></label>
            <label *ngIf="item.item.group" [text]="item.item.group.name"></label>
        </flexbox-layout>
    </stack-layout>
</stack-layout>

I tried putting shadow directive on the element with item-card` class first but it didn't create shadow on android and shadow was on inner elements on iOS. Here are screenshots:

After that, I tried putting the directive on the top element which creates shadow on android but I only want it to be visible on item-card element. On iOS shadow is again applied on child elements rather than the element itself:

I want the shadow to be applied around card-item element.

.item-card {
    border-width: 1px;
    border-color: #ddd;
    border-radius: 8;
    margin-top: 4;
}

.item-title {
    padding: 8;
    background-color: #eee;
    border-bottom-width: 1px;
    border-bottom-color: #ddd;
    align-items: center;
    font-size: 14;
    border-radius: 8 8 0 0;
}

.item-title .priority {
    flex-shrink: 0;
    margin-right: 5;
}

.item-body {
    font-size: 12;
    padding: 12 8;
    align-items: center;
}

[berardo]

Hi @erkanarslan, Thanks for the detailed response. So, don't apply shadow to the same level you apply css things like background-color and border-radius. They simply don't work together. I'd suggest you to remove border-radius from .item-card if favor of cornerRadius attribute. More here. Also make sure there's enough room within the parent component to show the shadow on Android. I guess a margin-bottom on .item-card would make the necessary extra space. Cheers

[tobydeh]

Im having the same issue. iOS seems to apply the shadow to the child elements within the main element (with the shadow attribute) where as on android it applies the shadow to the element its self.

If i set a background color on the element with the shadow attribute on iOS nothing happens at all (the child elements no longer have shadows). Why cant i have a background color when applying a shadow?

Everything works as expected on android.

[msangals]

Same issue here, the shadow will applied on child items. Only on iOS on Android works as expected.

[JillevdW]

This issue is still happening. Shadows on Android work fine, yet shadows on iOS will only apply to child elements.

EDIT: Putting some background on how iOS StackViews work to explain why this happens and how to solve it. At the start, my .html file looked a little like this:

<StackLayout #cards class="card" shadow="2" *ngFor="let item of content">

    <Label class="name" [text]="item.name"></Label>

    <FlexboxLayout class="datecontainer">

        <Label class="date" [text]="item.date"></Label>

    </FlexboxLayout>

</StackLayout>

So the desired behaviour is to create a number of cards, and give all those cards a shadow around them. However, the native component for a StackLayout on iOS is the StackView. This view has some pretty weird quirks, and one of them is that you can't give it a shadow. To give a StackView a shadow, you have to add a regular view (UIView) around it. Since I don't know how to expose that native code directly, you can hack around it:

<GridLayout shadow="2" *ngFor="let item of content">

    <StackLayout #cards class="card">

        <Label class="name" [text]="item.name"></Label>

        <FlexboxLayout class="datecontainer">        

            <Label class="date" [text]="item.date"></Label>

        </FlexboxLayout>

    </StackLayout>

</GridLayout>

When we give the StackLayout a background-color property in CSS, all the cards will now have a shadow!

[cfoulkes]

Hi JillevdW, does the same html work on both ios and android?

I'm having issues providing an appropriate margin around the StackLayout to display the shadow, that look ok on the two platforms.

[ebarahona]

You can keep your CSS if you just wrap your custom container in a parent shadow container, this works perfect for me:

 <StackLayout shadow [elevation]="6" [shadowOffset]="6">
                <StackLayout  class="your-custom-css-class">