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

[n.taddei]

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

Code sample:

<q-field
  :helper="sliderHelper"
  :error="percentageExceed"
  :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>
</q-field>

Can this be fixed ASAP?
Thanks, Niccolò

[pdanpdan]

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)

[n.taddei]

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

[spectrolite]

@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 http://beta.quasar-framework.org/components/field.html#Stacked-Label-QInput

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