I'm a beginner with Vue and I have encountered an issue with two v-text-field elements in a flexbox. They are currently taking up the entire available space on a line when displayed side by side. However, I would like to make them smaller. Despite trying to add a style to modify their width, it doesn't seem to be working as expected. I suspect that the style is being overwritten somewhere. Below is my code for the template and style:
<div class="selector pa-3 pt-0">
<div class="d-flex justify-space-between align-center py-2">
<v-text-field
outlined
dense
clearable
hide-details
class="textbox"
/>
<v-text-field
outlined
dense
clearable
hide-details
class="textbox"
/>
</div>
</div>
Below is the <style> section of the code:
<style scoped>
.selector {
position: sticky;
z-index: 1;
padding-top: 12px;
top: 0px;
background-color: white;
}
.textbox {
width: 30px;
}
</style>
If anyone has any suggestions or solutions, they would be greatly appreciated!