I have a list of items in the cart that’s presented in Bootstrap rows and cols. Each item has a PrimeVue InputNumber for changing the quantity of a specific product in the cart.
Here’s the sandbox with this issue.
This is how I use InputNumber:
<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>
Here’s the component with the list I’ve mentioned above:
<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>
As you see, I tried applying style="max-width: 100%; box-sizing: border-box;"
to the InputNumber component, but it didn’t work. Right now it looks like this:
Thank you in advance!