OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

PrimeVue InputNumber's width exceeds the width of its parent

  • Thread starter Thread starter Angelina
  • Start date Start date
A

Angelina

Guest
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:

Code:
<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:

Code:
<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:

enter image description here

To be clear, I want the InputNumber to fit its parent's width.

Thank you in advance!
<p>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.</p>
<p><a href="https://codesandbox.io/p/github/log...ar%22%3Atrue%2C%22sidebarPanelSize%22%3A15%7D" rel="nofollow noreferrer">Here's the sandbox with this issue.</a></p>
<p>This is how I use InputNumber:</p>
<pre class="lang-html prettyprint-override"><code><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>
</code></pre>
<p>Here's the component with the list I've mentioned above:</p>
<pre class="lang-html prettyprint-override"><code><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>
</code></pre>
<p>As you see, I tried applying <code>style="max-width: 100%; box-sizing: border-box;"</code> to the InputNumber component, but it didn't work. Right now it looks like this:</p>
<p><a href="https://i.sstatic.net/MFuNjUpB.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/MFuNjUpB.png" alt="enter image description here" /></a></p>
<p>To be clear, I want the InputNumber to fit its parent's width.</p>
<p>Thank you in advance!</p>
Continue reading...
 

Latest posts

G
Replies
0
Views
1
Gamal Othman
G
Top