Best way to use a virtual list inside a container with a height defined

Questions
1

Hi!

Framework 7 version:
Framework 7 v4.0.6
Framework 7 vue v4.0.6

I need a virtual list inside a container with a defined height where all the content of the virtual list has been overflowed, keep it hidden.

<div class="user-activity-list">
            <f7-list
                    class="searchbar-found last-activity-list"
                    media-list
                    virtual-list
                    :virtual-list-params="{ items, renderExternal }"
            >
                <f7-list-item
                    v-for="(item, index) in items"
                    :key="index"
                    :no-chevron="true"
                    media-item
                >

                    <f7-card>
                        <f7-card-header class="card-header no-border" valign="middle">
                            <div class="user-img hexagon"
                                 style="background-image: url('static/images/img-placeholder.png');"></div>
                            <div class="user-activity">
                                <span class="name">Emiliano</span>&nbsp;
                                <span class="hp">21</span>&nbsp;
                                ha posteado su score en
                                <span class="course">Gran Reserva Golf Resort & Country Club</span>
                            </div>
                        </f7-card-header>
                        <f7-card-content>
                            <div class="game-score-title">
                                <div class="inner-container">
                                    <img src="static/images/icons/score.png">
                                    Score de juego
                                </div>
                                <f7-link href="#" icon-f7="chevron_right" icon-size="16"></f7-link>
                            </div>

                            <div class="scores">
                                <div class="score">
                                    <div class="amount hexagon">
                                        101
                                    </div>
                                    Score
                                </div>
                                <div class="score">
                                    <div class="amount hexagon">
                                        32
                                    </div>
                                    Putts
                                </div>
                            </div>

                            <div class="actions">
                                <f7-link class="action">
                                    <span class="icon fist"></span>
                                    Puño
                                </f7-link>
                                <f7-link class="action">
                                    <span class="icon attest"></span>
                                    Attest
                                </f7-link>
                            </div>

                        </f7-card-content>
                    </f7-card>

                </f7-list-item>

            </f7-list>
        </div>

I try with with overflow: scroll on the container (.user-activity-list) and it works fine, but I’d prefer a more “native” approach.

Is this solution ok or exists other approaches?

Thanks in advance.

2

What can be more “native” than overflow: scroll, what is wrong with it? :slight_smile:

3

Hi @nolimits4web,

I mean, directly in the config of the fw7 component.

Thanks for your answer.