Search code examples
androidgoogle-chromeandroid-webviewbootstrap-4bootstrap-accordion

Huge blank space at the bottom in Bootstrap 4 in Chrome

I'm developing a WebApp with Bootstrap 4 that is running on Android inside a WebView as a local page. In some occasions I'm getting a huge blank space after the footer and I don't know why this is happening:

Error

My WebApp contains 3 parts:

  • A Carousel.
  • An Accordion with two (2) Cards.
  • A Footer.

This is an example of my HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
    <link rel="stylesheet" href="file:///android_asset/css/index.css" />
    <script src="file:///android_asset/js/jquery.min.js"></script>
    <script src="file:///android_asset/js/bootstrap.min.js"></script>
</head>
<body>
    <div>
        <div class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" id="carouselItems">
                <div class="item active">
                  <img src="1.jpg" alt="1">
                </div>
            </div>
        </div>

        <div id="accordion">
            <div class="card">
                <div class="card-header">
                    <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        Ingredientes
                    </a>
                </div>
                <div id="collapseOne" class="collapse show">
                    <div class="card-body">
                        <ul id="listIngredients">
                            <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                            <li>Aliquam tincidunt mauris eu risus.</li>
                            <li>Vestibulum auctor dapibus neque.</li>
                            <li>Nunc dignissim risus id metus.</li>
                            <li>Cras ornare tristique elit.</li>
                            <li>Vivamus vestibulum ntulla nec ante.</li>
                            <li>Praesent placerat risus quis eros.</li>
                            <li>Fusce pellentesque suscipit nibh.</li>
                            <li>Integer vitae libero ac risus egestas placerat.</li>
                            <li>Vestibulum commodo felis quis tortor.</li>
                            <li>Ut aliquam sollicitudin leo.</li>
                            <li>Cras iaculis ultricies nulla.</li>
                            <li>Donec quis dui at dolor tempor interdum.</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        Pasos
                    </a>
                </div>
                <div id="collapseTwo" class="collapse">
                    <div class="card-body">
                        <table class="table">
                            <tr>
                                <th><span>Porciones</span></th>
                                <th><span>Preparación</span></th>
                                <th><span>Cocción</span></th>
                            </tr>
                            <tr>
                                <td><span id="portions">1</span></td>
                                <td><span id="time1">1 min</span></td>
                                <td><span id="time2">10 min</span></td>
                            </tr>
                        </table>
                        <p id="txtRecipe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mattis sem. Ut varius, arcu nec egestas mollis, tellus nibh lobortis eros, quis mollis velit nunc nec diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non odio aliquam, sodales felis tincidunt, ultrices elit. Cras mattis fringilla erat sit amet venenatis. Curabitur venenatis aliquam risus et pellentesque. Proin volutpat ultricies erat, vitae pharetra sem blandit sed. Proin nisi mi, sodales eget lacinia eu, vehicula id est. Aliquam in lectus euismod, blandit nulla ultricies, maximus nisl. Praesent mattis ultrices ex et tristique. Integer sit amet arcu non mi rutrum fringilla et ac dui.<br />Duis dignissim rhoncus leo, vel pulvinar magna facilisis non. Integer lectus lorem, laoreet vel posuere vitae, tincidunt dapibus magna. Nam feugiat enim viverra accumsan rhoncus. Donec id nibh vel massa tristique pulvinar. Duis id orci in elit venenatis porta a vitae ipsum. Duis venenatis fringilla malesuada. Phasellus eget dui urna. Maecenas id mauris id odio facilisis imperdiet vulputate in nisi. Proin ultricies malesuada pellentesque. Integer blandit est et eros pharetra facilisis. Sed vitae augue augue. In hac habitasse platea dictumst.<br />Maecenas vitae ultrices dolor. Fusce placerat fringilla turpis a consequat. In porttitor consequat eleifend. Duis ante quam, congue id egestas id, vulputate eget libero. Pellentesque lobortis fermentum leo, sed bibendum ligula dapibus at. Aliquam risus mi, hendrerit sit amet enim sit amet, cursus aliquam quam. Integer dictum tincidunt augue id posuere. Donec urna neque, aliquam sit amet imperdiet eu, pellentesque vitae magna. Nulla vel ante magna. Curabitur cursus sagittis sapien ut luctus.<br />Integer gravida erat ut ipsum aliquet ultrices. Praesent blandit sagittis nunc, quis iaculis sem luctus ut. Aenean pellentesque vitae augue sed commodo. Nullam nunc metus, rutrum et porttitor nec, mattis at quam. Pellentesque tincidunt sollicitudin augue id facilisis. Ut nec ante justo. Pellentesque eget consectetur nisl, id semper massa. Vivamus accumsan dignissim consequat. Cras commodo imperdiet libero, ac fringilla felis pretium aliquet. Cras sodales scelerisque erat, vitae iaculis nisl ornare vitae. Mauris sit amet erat ac augue tempor volutpat eget laoreet justo. In hac habitasse platea dictumst. Donec quam sem, vulputate vitae pellentesque ac, pellentesque euismod tellus. Nullam felis enim, semper non faucibus malesuada, tincidunt vitae ligula. Vestibulum vitae massa id eros dapibus feugiat.<br />Aliquam id rutrum lacus. Nam lacus erat, sagittis in neque vel, placerat accumsan risus. Nulla facilisi. Etiam blandit est ac fermentum vestibulum. Morbi accumsan lectus pellentesque, cursus dolor nec, lobortis risus. Ut sem arcu, tempor sit amet nibh faucibus, hendrerit volutpat arcu. Donec non sagittis nulla, in varius augue.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer">
            <a id="copyright" href="https://www.google.com">© Leer la receta original</a>
        </div>
    </div>
</body>
</html>

The CSS (index.css):

abbr {
    text-decoration: underline;
}

th {
    vertical-align: middle
}

th, td {
    text-align: center
}

.footer {
    width: 100%;
    text-align: center;
}

.timer {
    height: 12px;
}

.carousel-caption {
    background-color: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
}

#txtRecipe {
    text-align: justify;
    padding-right: 12px
}

Also, this is Bootstrap version that I'm running (4.0.0, the latest one):

https://github.com/twbs/bootstrap/releases/download/v4.0.0/bootstrap-4.0.0-dist.zip

This is the jQuery version that I'm using (1.10.2):

https://code.jquery.com/jquery-1.10.2.min.js

I utilize it to add information to the paragraph, Carousel, a URL to the link and fill out a row of the table and the unordered list.

This is part of the my JS:

$(function () {
    $('#accordion .collapse').collapse('show');
});

Moreover, I have noticed that this issue happens randomly, and I'm not the only one who has experienced it, I found a similar question that doesn't have an answer too:

Migrate from Bootstrap 3.3.7 to Bootstrap 4: huge blank space at the bottom of the page

Additionally, I tested random CSSs like:

html, body {
    height: 100%important!
}

However, nothing changed. Furthermore, if it's useful for anyone, I'm testing in these 2 devices:

  • An Android Emulator with the API 26 (Pixel 2).
  • A Huawei Y7 with Android 7 that has as the default Browser: Yandex Browser.

Finally, if anyone has this doubt in mind:

If Bootstrap 4 doesn't work for you, why don't you use Bootstrap 3 instead?

I tried it and it didn't work because the combination of the Accordion and Cards. The Cards CSS was totally broken and the Accordion didn't work as expected, for example, the first Card was impossible to close.

Does anyone know what could be the reason of this huge blank space? Thanks for your worthy time and help.

Update:

After being able to debug on Chrome, I found this error for example:

In the normal case you see it like this:

Normal view

But in the abnormal scenario this happens:

Error

I consider the error is as soon the accordion is extended because it creates a space, but it's not removed.

Solution

  • I found how to fix this issue in Bootstrap 4:

    You must set all the info in a container and then create individuals rows per section.

    I got an idea from here:

    Bootstrap panel collapse creating gaps

    And this is my final solution:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="file:///android_asset/css/bootstrap.min.css">
    <link rel="stylesheet" href="file:///android_asset/css/index.css" />
    <script src="file:///android_asset/js/jquery.min.js"></script>
    <script src="file:///android_asset/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" id="carouselItems">
                    <div class="item active">
                      <img src="1.jpg" alt="1">
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div id="accordion">
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            Ingredientes
                        </a>
                    </div>
                    <div id="collapseOne" class="collapse show">
                        <div class="card-body">
                            <ul id="listIngredients">
                                <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                                <li>Aliquam tincidunt mauris eu risus.</li>
                                <li>Vestibulum auctor dapibus neque.</li>
                                <li>Nunc dignissim risus id metus.</li>
                                <li>Cras ornare tristique elit.</li>
                                <li>Vivamus vestibulum ntulla nec ante.</li>
                                <li>Praesent placerat risus quis eros.</li>
                                <li>Fusce pellentesque suscipit nibh.</li>
                                <li>Integer vitae libero ac risus egestas placerat.</li>
                                <li>Vestibulum commodo felis quis tortor.</li>
                                <li>Ut aliquam sollicitudin leo.</li>
                                <li>Cras iaculis ultricies nulla.</li>
                                <li>Donec quis dui at dolor tempor interdum.</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                            Pasos
                        </a>
                    </div>
                    <div id="collapseTwo" class="collapse">
                        <div class="card-body">
                            <table class="table">
                                <tr>
                                    <th><span>Porciones</span></th>
                                    <th><span>Preparación</span></th>
                                    <th><span>Cocción</span></th>
                                </tr>
                                <tr>
                                    <td><span id="portions">1</span></td>
                                    <td><span id="time1">1 min</span></td>
                                    <td><span id="time2">10 min</span></td>
                                </tr>
                            </table>
                            <p id="txtRecipe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mattis sem. Ut varius, arcu nec egestas mollis, tellus nibh lobortis eros, quis mollis velit nunc nec diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla non odio aliquam, sodales felis tincidunt, ultrices elit. Cras mattis fringilla erat sit amet venenatis. Curabitur venenatis aliquam risus et pellentesque. Proin volutpat ultricies erat, vitae pharetra sem blandit sed. Proin nisi mi, sodales eget lacinia eu, vehicula id est. Aliquam in lectus euismod, blandit nulla ultricies, maximus nisl. Praesent mattis ultrices ex et tristique. Integer sit amet arcu non mi rutrum fringilla et ac dui.<br />Duis dignissim rhoncus leo, vel pulvinar magna facilisis non. Integer lectus lorem, laoreet vel posuere vitae, tincidunt dapibus magna. Nam feugiat enim viverra accumsan rhoncus. Donec id nibh vel massa tristique pulvinar. Duis id orci in elit venenatis porta a vitae ipsum. Duis venenatis fringilla malesuada. Phasellus eget dui urna. Maecenas id mauris id odio facilisis imperdiet vulputate in nisi. Proin ultricies malesuada pellentesque. Integer blandit est et eros pharetra facilisis. Sed vitae augue augue. In hac habitasse platea dictumst.<br />Maecenas vitae ultrices dolor. Fusce placerat fringilla turpis a consequat. In porttitor consequat eleifend. Duis ante quam, congue id egestas id, vulputate eget libero. Pellentesque lobortis fermentum leo, sed bibendum ligula dapibus at. Aliquam risus mi, hendrerit sit amet enim sit amet, cursus aliquam quam. Integer dictum tincidunt augue id posuere. Donec urna neque, aliquam sit amet imperdiet eu, pellentesque vitae magna. Nulla vel ante magna. Curabitur cursus sagittis sapien ut luctus.<br />Integer gravida erat ut ipsum aliquet ultrices. Praesent blandit sagittis nunc, quis iaculis sem luctus ut. Aenean pellentesque vitae augue sed commodo. Nullam nunc metus, rutrum et porttitor nec, mattis at quam. Pellentesque tincidunt sollicitudin augue id facilisis. Ut nec ante justo. Pellentesque eget consectetur nisl, id semper massa. Vivamus accumsan dignissim consequat. Cras commodo imperdiet libero, ac fringilla felis pretium aliquet. Cras sodales scelerisque erat, vitae iaculis nisl ornare vitae. Mauris sit amet erat ac augue tempor volutpat eget laoreet justo. In hac habitasse platea dictumst. Donec quam sem, vulputate vitae pellentesque ac, pellentesque euismod tellus. Nullam felis enim, semper non faucibus malesuada, tincidunt vitae ligula. Vestibulum vitae massa id eros dapibus feugiat.<br />Aliquam id rutrum lacus. Nam lacus erat, sagittis in neque vel, placerat accumsan risus. Nulla facilisi. Etiam blandit est ac fermentum vestibulum. Morbi accumsan lectus pellentesque, cursus dolor nec, lobortis risus. Ut sem arcu, tempor sit amet nibh faucibus, hendrerit volutpat arcu. Donec non sagittis nulla, in varius augue.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="footer">
                <a id="copyright" href="https://www.google.com">© Leer la receta original</a>
            </div>
        </div>
    </div>
</body>
</html>