Javascript search bar displaying holes in place of not displayed cards-CodePudding

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 >
            <form>
                <label for="live_search">Rechercher une formation :</label>
                <input type="text" id="live_search" size="30"  placeholder="Rechercher une formation" />
            </form>
        </div>
        <br>
            <div >
                <div >
                    {% for formation in formations %}
                        <div >
                            <div >
                                <img  src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
                                <div >
                                    <h5 >{{ formation.title }}</h5>
                                    <p >{{ formation.description }}</p>
                                    <a  href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
                                    <span >par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>

CodePudding user response：

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

CodePudding user response：

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 >
            <form>
                <label for="live_search">Rechercher une formation :</label>
                <input type="text" id="live_search" size="30"  placeholder="Rechercher une formation" />
            </form>
        </div>
        <br>
            <div >
                <div >
                    {% for formation in formations %}
                        <div >
                            <div >
                                <img  src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
                                <div >
                                    <h5 >{{ formation.title }}</h5>
                                    <p >{{ formation.description }}</p>
                                    <a  href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
                                    <span >par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>