Stuck on setting pull-to-request full-height



  • Hello,

    I’m a little stuck on the “design” / helpers classes of flex.
    I can’t figure out how to flex the pull-to-refresh (& other stuff) over the whole remaining screen.

    alt text
    So currerently if you pull down on 1 it’ll work fine, but if you try to pull down where 2 is marked it won’t work.
    My goal is to have both places work ofcourse.

    I have tried a lot without success, I’ll show 1 thing that almost worked further down below but also show my problem with it.

    Code:

    <template>
        <q-page padding>
            <Header/>
    
            <q-pull-to-refresh :handler="refreshData">
                <div>
                    <div v-if="opponent">
                        <ChallengeCard :opponent="opponent" v-for="challenge in challenges" :challenge="challenge" :key="challenge.id" />
                    </div>
                </div>
            </q-pull-to-refresh>
        </q-page>
    </template>
    

    What I have tried that came close but broke something else:

    Code:

    <template>
        <q-page padding class="row">
            <Header/>
    
            <q-pull-to-refresh :handler="refreshData" class="flex">
                <div>
                    <div v-if="opponent">
                        <ChallengeCard :opponent="opponent" v-for="challenge in challenges" :challenge="challenge" :key="challenge.id" />
                    </div>
                </div>
            </q-pull-to-refresh>
        </q-page>
    </template>
    

    Situation:
    1 & 2 are working as I would like to but 3 is not working. Neither on the same height of the content as down below. I have tried a lot to stretch over the whole width with the use of flex and also the use of width 100% etc…
    alt text

    I’m having such a struggle and after trying for a couple of hours I’m clueless. That’s why I’m reaching out for any clues or help.

    Thanks in advance!


Log in to reply