The problem when I add shadow to any element inside any component not appear outside the parent component, There is Any way to overlay the shadow ?
<ion-toolbar no-padding>
<ion-segment [(ngModel)]="segment" color="segment-gray">
<ion-segment-button value="Highlights">
Highlights
</ion-segment-button>
<ion-segment-button value="Recent">
Recent
</ion-segment-button>
</ion-segment>
</ion-toolbar>
.toolbar{
overflow: visible;
}
.segment {
box-shadow: 0 22px 59px 0 rgba(0, 0, 0, 0.09);
background-color: #ffffff;
}
**The result is **
Expected View
why do the segments need shadow? can’t you put it on the toolbar instead to get the result you want?
Tip: Use the inspector in your browser to change the css on the fly if you want to keep it afterwards just copy it into your style file.
the idea not to add the shadow in the parent item, any item if I need to add shadow and let the shadow flow out is not possible in ionic components.
another example, here I have navbar and one of this element has a shadow.
<ion-navbar>
<ion-buttons end>
<button ion-button icon-only margin-right>
<ion-icon name="search" icon-sm></ion-icon>
</button>
<button ion-button icon-only>
<ion-icon name="icon-products" icon-sm></ion-icon>
<button ion-fab style="width: 20px; height: 20px; box-shadow: 0 5px 12px 0 rgba(253, 149, 187, 0.55);">
9
</button>
</button>
</ion-buttons>
<ion-title text-wrap>
Latest
</ion-title>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-navbar>
So put if I put contain: none; and overflow: visible; its work but I think this not good solution.
I’m look for another solution
