Forum | Appery.io

Ok, so I'm back!

I am trying to use Swiper to do a swiping banner across the top of the app. The Swiper works fine. However, the DIV retains its size that it has in the app with the three other DIVs for the banner inside.

So here's the design in the app.

And here's the problem. The Menu should start right under the banner. However, its separated by a big distance.

Any thoughts?

Hello Doug, please share your project with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and tell steps to test the question above.

App is shared (Church App Template). Just start the app and you'll see the issue.

Sorry, didn't check it was shared. I'll test and update asap.

Thanks!

Doug, in SwiperCSS asset for .swiper-container and .swiper-wrapper change:

pre
position:relative;
/pre
on:
pre
position:fixed;
/pre

That partially solved the problem; but now it looks very bizarre, is showing the slides + the remaining space in the DIV, and is hiding some of the menu.

For menuGrid component change top margin value, for example set 20, you'll see changes. Then edit as you need.

This appears to show the menu, but it obscures me from clicking on the top menu items. I believe the remaining portion of the DIV is still covering it.

Sorry for delay.
In CSS asset replace:
pre
div.swiper-container, div.swiper-slide {
width: 100%;
height: 100vw;
overflow: hidden !important;
}/pre

with
pre
div.swiper-container {
width: 100%;
height: 100vw;
overflow: hidden !important;
}/pre