Scroll problem on iphone 6 dialog with containerized layout



  • Screen Cast

    On scroll window “crash”

    <template>
        <q-dialog ref="dialog" persistent maximized>
            <q-layout view="hHh lpR fFf" container>
                <q-header bordered class="bg-white">
                    <q-toolbar
                        class="bg-primary text-white"
                        v-if="options.length == 0"
                    >
                        <q-toolbar-title>
                            <strong>Filtros</strong>
                        </q-toolbar-title>
                        <q-btn flat dense icon="fas fa-times" @click="close" />
                    </q-toolbar>
                    <q-toolbar class="bg-primary text-white" v-else>
                        <q-toolbar-title>
                            <strong>FILTER</strong>
                        </q-toolbar-title>
                    </q-toolbar>
                    <q-toolbar
                        class="bg-white text-grey"
                        v-if="options.length > 10"
                    >
                        <q-checkbox
                            dense
                            class="custom-checkbox"
                            v-model="checkAll"
                        />
                        <q-toolbar-title>
                            <q-input
                                dense
                                outlined
                                v-model="filter"
                                placeholder="Buscar"
                            >
                                <template v-slot:append>
                                    <q-icon name="fas fa-search" />
                                </template>
                            </q-input>
                        </q-toolbar-title>
                        <q-btn
                            flat
                            dense
                            :icon="
                                `fas fa-sort-alpha-${
                                    sortDir == 'asc' ? 'down' : 'down-alt'
                                }`
                            "
                            class="q-ml-sm"
                            @click="sort"
                        ></q-btn>
                    </q-toolbar>
                </q-header>
                <q-page-container>
                    <q-page class="bg-white">
                        
                    </q-page>
                </q-page-container>
                <q-footer bordered class="bg-white">
                    
                </q-footer>
            </q-layout>
        </q-dialog>
    </template>
    
    <script>
    
    export default {
        name: "PageStockVehiclesFilter",
    
        data() {
            return {
                filter: "",
                filterLabel: null,
                filters: [],
                options: [],
                sortDir: "asc",
                checkAll: false
            };
        },
    
        computed: {
            filtered() {
                let data = []
                for(var i = 0; i<50; i++) {
                    data.push({})
                }
                return data
            }
        },
    
        methods: {
            show() {
                this.$refs.dialog.show();
            },
    
            hide() {
                this.$refs.dialog.hide();
            },
            confirm() {
                this.close();
            },
    
            close() {
                this.hide();
            }
        }
    };
    </script>
    


  • @mantunes can please issue a ticket for this at quasar’s github repo, along with more details like device, quasar version and mode etc… thx.


Log in to reply