Page jumps when carousel content changes it height/content

Question

I am facing an interesting behavior on my page when the boostrap carousel is wrapped and the wrapper is position:absolute... so when the page is a bit scrolled down and next carousel-item has a different height the page simply "jumps"...

My home-hero-wrapper is 100vh and the carousel-home-wrapper which wraps the carousel is positioned absolute at the bottom. Regardless the size of the carousel-item it will be positioned at the bottom of the home-hero-wrapper

The Problem: All works fine until you scroll down the page a bit (The carousel must still on the viewport) and on the carousel transition the page simply "jumps"... However home-hero-wrapper does not change size and I can't figure why the sections are behaving like this...

What am I missing? Any tips?

The snippet below is reproducing the issue:

.home-hero-wrapper {
  height: 100vh;
  min-height: 200px;
  position: relative;
}
.carousel-home-wrapper {
  position: absolute;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="home-hero-wrapper bg-info">
    <div class="hero-image" style="background-image: url(https://via.placeholder.com/1024x800);">
    </div>
    <div class="carousel-home-wrapper">
            <div 
              id="carousel_home" 
              class="carousel slide carousel-fade" 
              data-ride="carousel"
              data-interval="1000"
             >
                <div class="carousel-inner">
                    <div class="carousel-item bg-light active">
                        <h2>Content Shorter</h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
                    </div>
                    <div class="carousel-item p-3 bg-light">
                        <h2>Content Longer</h2>
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.</p>
                    </div>
                </div>
            </div><!-- #carousel_home -->
        </div><!-- .carousel-home-wrapper -->
</div><!-- home-hero-wrapper -->
<div class="p-5 bg-warning">
  <h2>Scroll until here</h2>
  <h3>Make sure carousel still visible</h3>
  <p>Waiting until carousel transition... All sections will "jump"</p>
</div>
<div class="p-5">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorem rem earum temporibus perferendis corrupti minus harum, ex ipsam molestiae iste dicta voluptatum mollitia quia animi ut, soluta molestias natus ipsa.
</div>
<div class="p-5 bg-danger">
  <h2>Make sure carousel still visible</h2>
</div>

I've described in the question... Have you seem the code snippet? if you scroll down a little bit until the yellow section and also keep the carousel visible, when the carousel transition happen, the page jumps... thanks — caiovisk, Feb 25 '20 at 05:29
yes it jumps because `carousel-item` height is not same that's the reason it jumps, If you have same height for `carousel-item` there won't be page jump. — sanoj lawrence, Feb 25 '20 at 05:32
That is the problem, and your solution do NOT solve the problem as in this case the `carousel-item` must be different... have you considered that the `home-hero-wrapper` is positioned `relative` and is bigger than the `carousel` which is `absolute` positioned? — caiovisk, Feb 25 '20 at 05:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208466/discussion-between-caiovisk-and-sanoj-lawrence). — caiovisk, Feb 25 '20 at 05:38

Manas Khandelwal · Answer 1 · 2020-02-26T07:37:42.493

1

Ok, to do so first add the class p-3 to both carousel-item <div> or remove from both.

Secondly, remove all the classes from the <div> with id #carousel_home.

Also, add this CSS:

.carousel-item{
  height: 130px;
}

Now if the text inside the carousel-item will be shorter than the full width of the page then it will take only that amount of width taken by the text.

And if the text inside the carousel-item will be longer than the width of the page then the text will go to the next line.

Plus it will be anchored with the class home-hero-wrapper ant the bottom of the page. Take a look at the live code with the link below (NEW)

See the live code here (NEW): https://codepen.io/manaskhandelwal1/pen/QWbpvMW

See the live code here (OLD): https://codepen.io/manaskhandelwal1/pen/zYGNyxg

edited Feb 26 '20 at 07:37

answered Feb 25 '20 at 08:06

Manas Khandelwal

3,790
2
11
24

Thanks Mate, but it does not work ... Your solution is just limiting the size of the `carousel-item` ... and using ` width: fit-content` hides the content inside `carousel-item` if it is narrow... The `carousel-item` must change its height and must be 'anchored' to the bottom of the `home-hero-wrapper` – caiovisk Feb 26 '20 at 00:12
Thanks for that, but still "jumping".. if you scroll the page until you see the Yellow section, you will se that the section jumps between the carousel transitions... – caiovisk Feb 26 '20 at 06:56
ReEdited the answer, now it is not jumping. We need to give a fixed height to the ***`class` `carousel-item`***. Like: `.carousel-item{ height: 130px; }`. – Manas Khandelwal Feb 26 '20 at 07:39
Indeed if we fix the `height` it doesn't jump, but that is my issue, the height of `carousel-item` cannot be fixed... It has different height on each carousel item – caiovisk Feb 27 '20 at 02:57
If the `height` is not `fixed` then it is obvious that item with `less content` will move up and item with `more/large content` will move down. Other than that you can try `fixing` a word limit to `display` with `javascript` and add a `read more button` to read further. – Manas Khandelwal Feb 27 '20 at 07:11
`home-hero-wrapper` has fixed height and `position: relative`, `carousel-home-wrapper` which is inside home-hero-wrapper has `position: absolute`, no matter of the size of the carousel, NO content below `home-hero-wrapper` should move/jump, but it is moving/jumping... – caiovisk Feb 28 '20 at 00:32

Page jumps when carousel content changes it height/content

1 Answers1