Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] "display: inline-block" CSS property on <v-menu> component #3645

Closed
alexhx5 opened this issue Mar 22, 2018 · 9 comments · Fixed by #4577
Closed

[Bug Report] "display: inline-block" CSS property on <v-menu> component #3645

alexhx5 opened this issue Mar 22, 2018 · 9 comments · Fixed by #4577
Labels
good first issue A quick-win fix that would be great for new contributors S: has PR The issue has a pending Pull Request T: bug Functionality that does not work as intended/expected
Milestone

Comments

@alexhx5
Copy link
Contributor

alexhx5 commented Mar 22, 2018

Versions and Environment

Vuetify: 1.0.1
Vue: 2.5.16
Browsers: Chrome 65.0.3325.162
OS: Windows 10

Steps to reproduce

Un-comment the v-menu component in the codepen to see how it affects the element below it

Expected Behavior

Is there a particular reason why an invisible component needs display: inline-block; which affects visible components on the page?

Actual Behavior

<v-menu> component has display: inline-block; which moves all the elements below it when you add it on the page.

Reproduction Link

https://codepen.io/anon/pen/WzjoGz

@KaelWD
Copy link
Member

KaelWD commented Mar 22, 2018

Is there a particular reason why an invisible component needs display: inline-block;

Probably not, that's only really needed if it has an activator.

@KaelWD KaelWD added the T: bug Functionality that does not work as intended/expected label Mar 22, 2018
@KaelWD KaelWD added the good first issue A quick-win fix that would be great for new contributors label Jun 19, 2018
@ebisbe
Copy link
Contributor

ebisbe commented Jul 10, 2018

Use full-width prop if you don't want the display: inline-block;
@KaelWD it's not a bug

@alexhx5
Copy link
Contributor Author

alexhx5 commented Jul 10, 2018

@ebisbe well, how is it not a bug? The context menu is not supposed to occupy any space on the page. Wouldn't you agree? See the codepen.

I'm not sure how are people supposed to know they should use full-width prop to remove invisible block from the page? Especially when the description of this prop says Forces 100% width

@ebisbe
Copy link
Contributor

ebisbe commented Jul 10, 2018

@AlexSHoffman if you read my PR that has been closed you'll find the explanation. If it's not a bug then the documentation should be updated to explain this styling behaviour.

@alexhx5
Copy link
Contributor Author

alexhx5 commented Jul 10, 2018

@ebisbe yeah, I agree it's not really a "bug" in itself, but it's just confusing. Either the description of full-width prop should be updated (and state it should be used for context menus) or there should be a prop called context-menu that would do the same thing basically.

@johnleider
Copy link
Member

We are removing activator elements in the near future so this wont matter.

@KaelWD
Copy link
Member

KaelWD commented Jul 10, 2018

The bug is that it should only have the inline style if the activator slot is used.

@johnleider
Copy link
Member

Oh well sure, that's valid. Should be an easy PR if anyone is feeling 🐸 froggy

@ebisbe
Copy link
Contributor

ebisbe commented Jul 10, 2018 via email

@KaelWD KaelWD added the S: has PR The issue has a pending Pull Request label Jul 11, 2018
@KaelWD KaelWD added this to the v1.1.x milestone Jul 11, 2018
@lock lock bot locked as resolved and limited conversation to collaborators Jul 17, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
good first issue A quick-win fix that would be great for new contributors S: has PR The issue has a pending Pull Request T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants