Invalid prop: custom validator check failed for prop "labelWidth"

  • @rstoenescu @s-molinari
    Even if I use it like described in docs, I still receive this Vue Warn that’s pretty noisy.

    Code sample:

      :label="`Percentage: ${newPercentage}%`"
      :label-width="12" // <--------------------- HERE'S THE ISSUE!
      error-label="Attention: max total percentage must be 100%"
      <q-slider v-model="newPercentage" :min="0" :max="100" label></q-slider>

    Can this be fixed ASAP?
    Thanks, Niccolò

  • label-width should be 1<= val < 12. It’s not a width in pixels but a width in number of layout columns (12 based).
    As it’s a label for something it makes no sense to fill the whole space (12)

  • Why shouldn’t make sense to fill the whole space? I want it always full width like mobile style…

  • @n-taddei I tend to agree with you in principle, but I don’t understand your problem. Even without a width set, the label will be screenwide on mobile view. If you want it stacked in all screen sizes there’s float-label

    if you still cannot achieve the desired output, please provide a screenshot/drawing to illustrate and we ll help you get there.

Log in to reply