Vuetify: [Bug Report] Menu width in IE11

[Zhernet]

Environment

Vuetify Version: 2.0.5
Last working version: 1.5.16
Vue Version: 2.6.10
Browsers: Internet Explorer
OS: Windows 10

Steps to reproduce

1. Go to https://vuetifyjs.com/en/components/menus#absolute-position-without-activator with IE11
2. Try to open a menu

Expected Behavior

The menu should be displayed correctly.

Actual Behavior

The menu width is too small to display anything

Other comments

It works fine with the version 1 of Vuetify. See: https://vuetifyjs.com/en/components/menus#absolute-position-without-activator.

A temporary fix is to add a min-width to <v-list>

[johnleider]

Tried a few fixes but all had issues with browsers that are not ie11.

[mseele]

One more thing.

Without v-list-item-avatar text is also not centered vertically:

Workaround is to add a div with "correct" height in front of v-list-item-title:

<div style="height: 48px;"></div>
<v-list-item-title>{{ item.title }}</v-list-item-title>

[cjhih456]

i found a solution..
i hope to take better idea

    <v-list-item>
      <v-list-item-action class="mx-0">
        {{ item.title }}
      </v-list-item-action>
    </v-list-item>

it's running clearly on ie11 & chrome

[Webifi]

Any updates on this? The "work-around" (adding a min-width) doesn't seem to support dynamic widths, so not really a work-around.

[maiorano84]

This bug is affecting #9185

Absolutely positioned menus in IE are failing both locally as well as on the Vuetify website examples. Min widths are not an acceptable workaround, as not all menu widths can be calculated beforehand.

[Mikilll94]

Ping. Is this going to be fixed?

[jworkmeister0]

I'm currently working around this by overriding display: flex; to display: block; in .v-list-item (see here). This is not ideal, but it's a quick and dirty fix for the time being.