I currently have a collection of items in the shopping cart that are displayed using Bootstrap rows and columns. Each item includes a PrimeVue InputNumber component for adjusting the quantity of a specific product within the cart.
If you'd like to explore the issue further, please check out this StackBlitz project by following this link.
This is how the InputNumber element is implemented:
<InputNumber v-model="item.qty"
inputId="horizontal-buttons"
showButtons
buttonLayout="horizontal"
:step="1"
style="max-width: 100%; box-sizing: border-box;">
<template #incrementbuttonicon>
<span class="material-symbols-sharp">
add
</span>
</template>
<template #decrementbuttonicon>
<span class="material-symbols-sharp">
remove
</span>
</template>
</InputNumber>
Below is the component containing the aforementioned list:
<script setup>
import InputNumber from 'primevue/inputnumber'
import { useCartStore } from '../stores/cartStore.js'
import { storeToRefs } from 'pinia'
const cartStore = useCartStore()
const { cart } = storeToRefs(cartStore)
const { deleteFromCart } = cartStore
</script>
<template>
<div class="row mw-2000 mx-auto px-lg-5 px-0 my-0">
<section class="col-9">
<div class="container-fluid">
<div class="row border-top border-bottom cart-item"
v-for="item in cart">
<img class="col-2" :src="item.product.images[0]" alt="Product">
<div class="col-6 d-inline-block overflow-ellipsis">
{{ item.product.title }}
</div>
<div class="col-1 d-inline-block overflow-ellipsis">
${{ parseFloat(item.product.price).toFixed(2) }}
</div>
<div class="col-2">
<InputNumber v-model="item.qty"
inputId="horizontal-buttons"
showButtons
buttonLayout="horizontal"
:step="1" style="max-width: 100%; box-sizing: border-box;">
<template #incrementbuttonicon>
<span class="material-symbols-sharp">
add
</span>
</template>
<template #decrementbuttonicon>
<span class="material-symbols-sharp">
remove
</span>
</template>
</InputNumber>
</div>
<div class="col-1 d-flex justify-content-end">
<button type="button"
class="btn btn-danger delete-product-btn d-inline-flex
justify-content-center align-items-center"
@click="deleteFromCart(item.product.id)">
<span class="material-symbols-sharp">
close
</span>
</button>
</div>
</div>
</div>
</section>
<section class="col-3"></section>
</div>
</template>
I've attempted applying
style="max-width: 100%; box-sizing: border-box;"max-width: 100% with width: 100%, without success. Currently, the input appears as shown:
https://i.sstatic.net/MFuNjUpB.png
Despite my efforts to diagnose the issue by inspecting the component, I haven't been able to identify any specific reason for this behavior. There doesn't appear to be any fixed-width settings applied to the InputNumber component. For a visual reference, please see the screenshots provided:
https://i.sstatic.net/8jyaGJTK.png
https://i.sstatic.net/6iLVX4BM.png
Just to clarify, my objective is to have the InputNumber element adjust to the width of its parent container.
Thank you for your assistance in advance!