[Solved] Expandable cards inside blocks/grids and swiper



someone has experience with using expandable cards for grids or swiper?

I am working on application for tablets and I want to use expandable cards for grid of products but the end effect looks really bad: expanded card is showed under “backdrop layer” and in wrong places (especially when expandable card is inside cell which is located in block).

Is that by design or should I report the problem?


Expandable can’t work if it is inside of elements with overflow: hidden. Otherwise should work, better show JSFiddle with the issue


overflow: hidden is the case for swiper but for block rather should be ok, here is my JSFiddle https://jsfiddle.net/u4oyjhza/ . When is more elements/components on the page problem is much more visible. Without <div class="block"> all seems fine.


This issue fixed, will arrive in next update


The problem with wrong position is fixed in version 4.1.1 (thanks for that) but backdrop layer is still on the front of card : https://jsfiddle.net/nqwc2y6r/


In this case you need to use custom backdrop like here https://jsfiddle.net/Lmh97uo6/. Forgot add this feature to docs, will add it


New example work as expected, thanks!