[Solved] Expandable cards inside blocks/grids and swiper

Questions
1

Hello,

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?

2

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

3

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.

4

This issue fixed, will arrive in next update

1 Like
5

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/

6

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

7

New example work as expected, thanks!

8

Expandable cards doesn’t work inside div with display: flex. Why?