I'm currently in the process of developing a quiz using VueJS and Vuetify. My challenge lies in organizing the answer options vertically for the user to select. I attempted to utilize the v-btn-toggle component, but encountered an issue where the buttons are aligned horizontally by default. Is there a way to set them up vertically instead?
Here's how my layout looks:
<v-btn-toggle v-model="toggle_multiple" multiple>
<v-btn>
Answer 1
</v-btn>
<v-btn>
Answer 2
</v-btn>
<v-btn>
Answer 3
</v-btn>
<v-btn>
Answer 4
</v-btn>
</v-btn-toggle>
As suggested in this discussion, I tried styling it this way:
.v-btn-toggle{
flex-direction: column;
}
The attempted solution resulted in an unexpected outcome, where only the first two answers were displayed partially as shown here: example image
Any assistance would be greatly appreciated.
Edit:
I've identified that the issue stems from Vuetify's preset CSS styles, particularly limiting the button height to 48 pixels with the following code:
.v-btn-group--density-default.v-btn-group {
height: 48px;
}