I'm currently using the Quasar framework in my application (click here to check it out). Within the "Timeline" function, I have integrated a q-select element for selecting a country. While I successfully fixed the width of the q-select element itself, I am facing challenges in fixing the width of the list displayed below it (the width changes based on the length of the country name, which is not very user-friendly).
https://i.sstatic.net/maD8a.png
Can someone guide me on how to fix the width of the list right under the q-select element?
Here's a snippet of my code:
<q-select outlined v-model="country" :options="data" option-label="name" label="Select a Country" class="input" />
<style scoped lang="scss">
.bg-color {
background-color: #e7e8d1;
}
.input {
width: 200px;
margin: 10px 0;
}
</style>