CSS - How to make a dynamic bootstrap list scrollable - css

Question

I have this code in my vue app
<form class="d-flex me-auto" id="searchBar">
<div class="input-group">
<input class="form-control" type="text" placeholder="Cerca professionista" #keyup="search" aria-label="Search" v-model="searchInput">
<button class="btn btn-outline-success" #click.prevent="search">
<i class="fa-solid fa-search"></i>
</button>
</div>
</form>
<div class="list-group" v-if="searchResults.length > 0" id="searchResultsList">
<a href="#" class="list-group-item list-group-item-action" v-for="(result, index) in searchResults" :key="index" id="searchResult" #click.prevent="showUserProfile(result.username)">
<div class="d-flex w-100 justify-content-between">
<p class="ps-2 me-auto mb-1">{{ result.name }} {{ result.surname }}</p>
<!-- <img :src="result.propicUrl" id="searchResultThumbnail"> -->
</div>
<small class="ps-2 me-auto">{{ result.category }}</small>
</a>
</div>
I will have a list that will contain the results of a search, since there are a lot of results, how I can make it scrollable? At the moment I have added this css rules but not working
<style lang="scss">
#menu {
height: 75px;
.navbar-brand {
padding-top: 0;
#logo {
width: 60px;
height: 60px;
}
}
#searchBar {
width: 420px;
}
#searchResultsList {
position: absolute;
top: 3.8em;
left: 5.4em;
width: 420px;
overflow-y: scroll;
#searchResult {
overflow-y: scroll;
#searchResultThumbnail {
height: 40px;
width: 40px;
border-radius: 50%;
}
}
}
}
</style>

Answer 1

You need to set either height or max-height to a value that results in a concrete size (e.g: 40vw, 200px, 20pt) for overflow-y: auto | scroll to have any effect.
Without setting the (max-)height, the element will grow to match the height of its children and will never display an active scrollbar.
Side note: considering the element has position: absolute, height: 100% will likely delegate the height request to the closest positioned ancestor but, again, you do need a positioned ancestor with a concrete height for overflow-y: auto | scroll to work.
Generic example:
Vue.createApp().mount('#app')
#app {
max-height: 100px;
overflow-y: auto;
border: 1px solid red;
}
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<div v-for="n in 20">test</div>
</div>
Playground:
const { createApp, reactive, toRefs } = Vue;
createApp({
setup: () => ({
...toRefs(reactive({
setHeight: false,
setMaxHeight: true,
listLength: 20
}))
})
}).mount('#app')
#app {
display: flex;
}
#app>* {
flex: 0 0 50%;
}
.scroller {
overflow-y: auto;
border: 1px solid red;
}
.controls {
padding: 0 1rem;
display: flex;
flex-direction: column;
}
* {
box-sizing: border-box;
}
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<div class="scroller" :style="{ height: setHeight ? '100px' : '', maxHeight: setMaxHeight ? '100px': ''}">
<div v-for="n in listLength">test</div>
</div>
<div class="controls">
<div>
Items: <input type="number" v-model="listLength">
</div>
<label>
<input v-model="setHeight" type="checkbox">
Set height
</label>
<label>
<input v-model="setMaxHeight" type="checkbox">
Set max height
</label>
</div>
</div>
The difference between setting height and max-height is that with height the element will have the specified height even when it doesn't have enough content to fill it, while with max-height, when you don't have enough content, the element will shrink all the way down to 0 (unless something else gives it a soft min-height: e.g: a flex container).