Recently, I've delved into Bootstrap after focusing primarily on backend development. As part of my front end work, I am implementing a feature where users can search for a place and a list of nearby venues will appear in a card layout using Bootstrap cards.
However, when I perform a search, the card suddenly shrinks to a small size with scroll bars, causing all content divs (such as map/card) to shift downwards slightly.
https://i.sstatic.net/L0mPO.png
My goal is to maintain a consistent standard height for the card post-search.
Below is the initial HTML code for the card:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Places Nearby</h5>
<div id="cafes">
<div id="cafe_list"></div>
</div>
</div>
</div>
And here is the relevant HTML code for the function that generates the list:
<div class="cafe-details d-flex">
<ul>
{% for cafe in cafes %}
<li>
<address>
<div>
<h6 class="cafe-name" data-id="{{ cafe.id }}">{{ cafe.cafe_name }}</h6>
<p>{{ cafe.cafe_address }}</p>
</div>
</address>
<p>
<a href="">Add to List</a> / <a href="">Recommend</a>
</p>
</li>
{% endfor %}
</ul>
</div>
Lastly, below is a snippet of my CSS related to the issue:
.card {
position: absolute;
width: 100px;
border: 1px;
top: 75px;
bottom: 10px;
left: 25px;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}
.cafe-details {
position: absolute;
}