Currently, I am in the process of developing an online learning platform which features a catalog of courses. Users can search for courses based on the titles or descriptions using the search bar. To display the catalog, I have utilized bootstrap cards. The functionality works smoothly on mobile devices, with the results appearing vertically one after another. However, on desktop, I am encountering an issue where hidden cards result in empty spaces and the displayed results have large gaps between them. This creates a disjointed user experience. Is there a way to rectify this issue on desktop while maintaining the current layout on mobile? Thank you!
Click here to view the "empty spaces"
JavaScript 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">Search for a course :</label>
<input type="text" id="live_search" size="30" class="form-control" placeholder="Search for a course" />
</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">view</a>
<span class="small">by {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>