E
Based on a conversation with Hawkeye64 in Discord, the problem seems to be that a div created by QScrollArea has the height set to 0.
The general structure is QScrollArea->Inner Div->Content Container DIV->Content Div’s … It’s the Inner Div whose height is 0. The height of the Content Container DIV is correct and seems to be calculated based on the total height of the Content Div’s. When the height of the QScrollArea is explicitly set, the Inner Div gets the same height at the QScrollArea. When the height of the QScrollArea is calculated automatically, the Inner Div does not receive the height of the QScrollArea. (However, with the latest version of Firefox, the Inner Div does get the height of QScrollArea and that would seem is why it works.)
The proposed solution is to assign the class of the QScrollArea to a computed property which can calculate the correct height of the area and assign it explicitly. I am trying to work out how to do that and my code currently looks like:
<template>
<q-page class="column page-content ">
<q-scroll-area :class="classScrollArea">
<div v-for="n in 100" :key="n.id" class="scroll-row-content">
the quick brown fox jumped over the lazy dog
</div>
</q-scroll-area>
<!-- <q-scroll-area class="col scroll-area">
<div v-for="n in 100" :key="n.id" class="scroll-row-content">
the quick brown fox jumped over the lazy dog
</div>
</q-scroll-area> -->
</q-page>
</template>
<style>
</style>
<script>
export default {
name: 'PageIndex',
computed: {
classScrollArea: function () {
return { 'background-color': 'yellow' }
}
}
}
</script>
<style>
.page-content {
background-color: green;
}
.scroll-area {
background-color: red;
}
.scroll-row-content {
background-color: blue;
color: white;
}
</style>
Now, this does not yet set the height, just the background color…however, when I check the background-color of the QScrollArea with the Chrome Dev Tools, it is not set. It seems to be adding a class "background-color’ to the list of classes assigned to the QScrollArea.
I have pushed this commit to the GitHub project. I am not sure what I am doing wrong or how to resolve the problem and would appreciate some additional help.
