Issue : .swiper{width:100%} seems to not work in a grid template (it endlessly jumps) #5285

pixiwooh · 2021-12-10T09:50:51Z

pixiwooh
Dec 10, 2021

When included in a grid template
Simplified example :

<body>
  <div id="wrapper">
    <div class="swiper"></div >
  </div>
  <div id="sidebar"></div>
</body>

and :

body {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 140px;
	grid-template-areas: 'wrapper sidebar';
}
#wrapper {
	grid-area: wrapper;
}
#sidebar {
	grid-area: sidebar;
}
.swiper {
	width: 100%;
	height: 50rem;
}

the slideshow jumps on place endlessly... and breaks the layout by being way too large, as if he didn't respect the width of his parent which is part of a grid.

Any idea? Am I the only one? Thanks.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issue : .swiper{width:100%} seems to not work in a grid template (it endlessly jumps) #5285

Uh oh!

{{title}}

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Issue : .swiper{width:100%} seems to not work in a grid template (it endlessly jumps) #5285

Uh oh!

pixiwooh Dec 10, 2021

Replies: 0 comments

pixiwooh
Dec 10, 2021