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

The button is wider than the context menu when not using bootstrap-vue #26

Closed
guyguy2001 opened this issue Jun 19, 2019 · 6 comments
Labels
bug

Comments

@guyguy2001
Copy link

@guyguy2001 guyguy2001 commented Jun 19, 2019

Description

When I use the context menu in a project, the buttons seem to be wider than the context menu holding them:
image

In addition, when running in chrome, there is a blue outline to the menu.

Steps to Reproduce

Either clone https://github.com/guyguy2001/vue-context-reproduction and run it via npm i, npm run serve, or:

  1. Init a new vue project via vue create vue-context-reproduction (I used the default babel + eslint setup).
  2. Copy the html and the javascript into either App.vue or HelloWorld.vue, and modify them to fit inside the component (Make sure to remove the li styling from the example component).
  3. Run via npm install vue-context, npm install, npm run serve.

Expected behavior: [What did you expect to happen]
A normal context menu appearing, like in the example screenshots.

Actual behavior: [What actually happens]
The context menu appears, but has a blue outline (Only on chrome), and the buttons are wider than the context box, meaning that the text is centered weirdly, and when I hover over a button, its background is too wide.

Reproduces how often: [What percentage of the time does it reproduce?]
The problem occurs consistantly, whenever I run the project.

Version

Version: 4.0.1 (doesn't happen on 3.4.0)
Chrome: Version 74.0.3729.169 (Official Build) (64-bit)
Firefox: 64.0 (64-bit)

@guyguy2001 guyguy2001 changed the title The button background is wider than the context menu The button is wider than the context menu Jun 19, 2019
@guyguy2001

This comment has been minimized.

Copy link
Author

@guyguy2001 guyguy2001 commented Jun 19, 2019

If someone can confirm that this is an error in the library and not in my usage of it, I can fix it in a PR.

@ChuckFields

This comment has been minimized.

Copy link

@ChuckFields ChuckFields commented Jun 21, 2019

@guyguy2001 This is interesting. I have not experienced this issue when using this library in my project, however, I submitted a different issue here and in the link I used to reproduce that issue, i'm experiencing this issue.

@guyguy2001

This comment has been minimized.

Copy link
Author

@guyguy2001 guyguy2001 commented Jun 21, 2019

Weird...
@ChuckFields, are you sure you were using the 4.x version of the library in your project?
And could you share the way you used it in your project, and the css that affected it?

@ChuckFields

This comment has been minimized.

Copy link

@ChuckFields ChuckFields commented Jun 21, 2019

@guyguy2001 Ah... In my project I'm doing this:

* {
  box-sizing: border-box;
}

Which fixes the issue.
To understand this deeper, check this out
The width of .v-context > li > a is 100%
Which does not account for the padding of 'a', which pushes everything out.
Which is why box-sizing: border-box; fixes this issue.
This means, removing .v-context > li > a width: 100% will fix the issue as well, which I think is the right solution.
I don't know what rippling effects this might have though.

@guyguy2001

This comment has been minimized.

Copy link
Author

@guyguy2001 guyguy2001 commented Jun 22, 2019

I just forked the repo, and it seems that it works in their example file (https://github.com/rawilk/vue-context/blob/master/test/index.html), because they use bootstrap-vue.
I fixed this issue and the blue outline on my fork - guyguy2001@f8d9ab9.
@rawilk, is this module supposed to work without bootstrap-vue, or did I miss anything?
If so, I'll add a second html file which doesn't use bootstrap to the test folder, and PR.

@guyguy2001 guyguy2001 changed the title The button is wider than the context menu The button is wider than the context menu when not using bootstrap-vue Jun 22, 2019
@rawilk

This comment has been minimized.

Copy link
Owner

@rawilk rawilk commented Jun 22, 2019

@guyguy2001 The module should work fine without bootstrap. If you look closely, you'll see I'm not using bootstrap-vue, but just the style sheet from bootstrap itself. If you look at the documentation site (https://vue-context.com) in chrome, you'll notice the menu actually receives the blue outline like you are describing. Since I focus the menu when opening it, it receives the outline from the browser stylesheets.

This may be desireable for some people, but for most they probably don't want that outline. I'll be publishing a patch update later that removes that outline when focusing the menu and also the outline from any <a> tags that receive focus inside the menu. It should also be fixing the the width issue by applying box-sizing: border-box to the menu and removing the width: 100% from the <a> tags as @ChuckFields suggested.

@rawilk rawilk added the bug label Jun 22, 2019
rawilk added a commit that referenced this issue Jun 22, 2019
@rawilk rawilk closed this Jun 24, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.