I have this code in my vue app

            <form  id="searchBar">
                <div >
                    <input  type="text" placeholder="Cerca professionista" @keyup="search" aria-label="Search" v-model="searchInput">
                    <button  @click.prevent="search">
                        <i ></i>
                    </button>
                </div>
            </form>
            <div  v-if="searchResults.length > 0" id="searchResultsList">
                <a href="#"  v-for="(result, index) in searchResults" :key="index" id="searchResult" @click.prevent="showUserProfile(result.username)">
                    <div >
                        <p >{{ result.name }} {{ result.surname }}</p>
                        <!-- <img :src="result.propicUrl" id="searchResultThumbnail"> -->
                    </div>
                    <small >{{ 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>

CodePudding user response：

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  :style="{ height: setHeight ? '100px' : '', maxHeight: setMaxHeight ? '100px': ''}">
    <div v-for="n in listLength">test</div>
  </div>
  <div >
    <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).