'Javascript search bar displaying holes in place of not displayed cards

so I'm building this online learning website, and I have a catalog of all courses where you can search for courses which titles or description contain the input in the search bar. I used bootstrap cards to make the catalog. It's working well, but on desktop I get empty spaces in place of the cards which are hidden, and the results show with big empty spaces between them is there were courses in between etc. No issue on mobile, all results show up vertically one after another. Is there a way to go around that? thanks!

Picture to see the "empty spaces"

JS code:

$('#live_search').on('keyup', function() {
    let input = $(this).val();
    $('.card').hide();
    $('.card').filter(function() {
        return new RegExp(input, 'i').test($(this).text())
    }).show();
});

Cards:

<div class="search">
            <form>
                <label for="live_search">Rechercher une formation :</label>
                <input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
            </form>
        </div>
        <br>
            <div class="container px-5 mb-3">
                <div class="row">
                    {% for formation in formations %}
                        <div class="col-md-4">
                            <div class="card">
                                <img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
                                <div class="card-body">
                                    <h5 class="card-title">{{ formation.title }}</h5>
                                    <p class="card-text">{{ formation.description }}</p>
                                    <a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
                                    <span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
javascripthtmljquerycssbootstrap-5


Solution 1:[1]

You're hiding the card but keeping the col-md-4 div. You can merge the col-md-4 and card divs.

Solution 2:[2]

Just hide the col-md-4 div by introducing a "wrapper" class (or whatever you want to call it)

JS Code

$('#live_search').on('keyup', function() {
    let input = $(this).val();
    $('.wrapper').hide();
    $('.wrapper').filter(function() {
        return new RegExp(input, 'i').test($(this).text())
    }).show();
});

Cards

<div class="search">
            <form>
                <label for="live_search">Rechercher une formation :</label>
                <input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
            </form>
        </div>
        <br>
            <div class="container px-5 mb-3">
                <div class="row">
                    {% for formation in formations %}
                        <div class="col-md-4 wrapper">
                            <div class="card">
                                <img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
                                <div class="card-body">
                                    <h5 class="card-title">{{ formation.title }}</h5>
                                    <p class="card-text">{{ formation.description }}</p>
                                    <a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
                                    <span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Cédric
Solution 2 Kenneth Ong

Related Questions