[Bug Report][3.0.2] v-navigation-drawer width attribute does not accept "px" or "%"

[drhouse82]

Environment

Vuetify Version: 3.0.2 Last working version: 2.6.11 Vue Version: 3.2.45 Browsers: Firefox 107.0 OS: Windows 10

Steps to reproduce

The v-navigation-drawer does accept width="500" or :width="500" as a property. So it accepts unitless numbers or strings parsable as numbers. It does not accept width="50%". Try typing the string into the text-input of the codepen.

Expected Behavior

accept css compatible width values including %.

Actual Behavior

only pixel-values without "px" suffix are accepted.

Reproduction Link

https://codepen.io/drhouse82/pen/BaVrwBJ?editors=101

[ricardovanlaarhoven]

still exists in 3.1.2

[webdevnerdstuff]

Not sure if this helps or not, but here's some more info about the issue. I was trying to see if I can fix it, and so far I can get it working if it uses a px unit, but not %. Currently it's using Number(props.width), which is why the value is going to NaN. railWidth also has this bug.

Part of the problem is that the width value is passed around multiple places, and convertToUnit is also not being passing a unit and defaults to px (which is why % doesn't work here). After a few hours I have to admit defeat and that I would need to know this code base significantly more to even have a chance at helping beyond this snippet.

Problem is on line: 109 packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx

Fixes for px, but not %

    const width = computed(() => {
      return (props.rail && props.expandOnHover && isHovering.value)
        ? Number(parseFloat(props.width))
        : Number(parseFloat(props.rail ? props.railWidth : props.width))
    })

[webdevnerdstuff]

@KaelWD do you think we could get the Bug label added to this one please? I feel like it's getting lost in the mix of everything.

[johnleider]

It's not really a bug considering we've never accepted px or % values for app level components in v3. It's not to say that we can't do it with suspense, but it's not supported atm.

[danilpon98]

I faced the same problem. I can't get VNavigationDrawer to be 100% wide on mobile devices.

[thany]

It's not really a bug considering we've never accepted px or % values for app level components in v3

Worked fine in v2, so while this is technically true, it's not the whole truth.

[johnleider]

It's not really a bug considering we've never accepted px or % values for app level components in v3

Worked fine in v2, so while this is technically true, it's not the whole truth.

Feel free to create a P.R.