Hi Guys.
Please see attached screenshot.
I have just download the ContextMenu add-on. However, the display looks very wrong. The background is very dark (like a transparent shadow), with black text. I am pretty sure its not meant to look like that!
I am using vaadin 7.1.11, with the chameleon theme. I have some custom styles in my style.css, but I would think nothing that should affect the ContextMenu.
Any ideas?
Many thanks,
Lee.
For what its worth, I have noticed that the style.css I have is full of references to “v-contextmenu”, but the element created by the CustomMenu add-on has an id of “v-context-menu”.
Is this just because they are two different components entirely (v-contextmenu is CORE, v-context-menu is the add-on)?
Or is my style.css out of date (it was generated when vaadin 7 was in very early stages)?
Cheers,
Lee.
Hmmm.
Or am I missing jar files required for scss. Up until now, we’ve never used them, and I remember trimming out a lot of the delivered vaadin jars that we did not need at run-time…
Nope. Im beat. And fed up speaking to myself 
So I eagerly await some help!
Ok, Im fairly sure I now have to somehow ‘import’ the Context Menu sccs file into my own css file. But how…?
Hi,
If you’re using a Sass based theme, you should just need to compile the theme using the Eclipse plugin. That should automatically add the proper styles from the ContextMenu add-on JAR into your own theme.
Hi.
Thanks for the reply, but I’m still getting nowhere here. I am afraid I know only the very basics of css (enough to create/modify a few styles we needed for our application).
To summarise, I use the chameleon theme. I have an old-school “styles.css”, that imports legacy-styles.css as follows:
@import "../chameleon/legacy-styles.css"I have download ContextMenu-4.4.0.jar, and have created a context menu in my application. Unfortunately, as you can see in the screenshot in my original post, it is not styled correctly.
Now, as far as I am aware, this is because I somehow need to compile that contextmenu.scss file that is contained within the ContectMenu-4.4.0.jar, and then include it in my own styles.css? Is this correct?
If so, how do I go about actually doing this? It doesnt seem trivial at all! I have tried simple stuff like creating a small stand-alone web project, extracted the contextmenu.scss from the jar and placed it an a VAADIN/themes folder, and tried to run the compile tool. It didnt work, and just complained that I must first select a scss file to compile.
This is a wee bit painful, and not quite as ‘drop-in’ friendly as I would have hoped!
Any help would be greatly appreciated.
Lee.
I have the same problem and don’t know what to do right now…
You could try switching to a Sass based theme, that will probably be the least error-prone approach.
Another option is to compile the contextmenu.scss as you tried. You could try to use any online Sass compilers to do it for you, and just copy-paste the result back to your theme for a quick workaround.
Thanks for your help, Jouni.
I took your advice, and compiled contextmenu.scss down to css, and then imported the resulting file into our styles.css. Unfortunately it also referenced an image it could not find; img/base/arrow.png for sub-menus. This didnt come in the ContextMenu-4.4.0.jar, and nor could I find it in Vaadin 7.1.11. However, I did find something suitable from the default vaadin themes and just used that instead.
So it works (see attached screen), but it is pretty hacky.
It looks like the long term solution would be to switch to a sass-based theme, but that is certainly one for the future!
Question. This add-on is very popular (thousands of downloads), and fills what I think is a bit of a hole in Vaadin. Are there any plans to introduce this to Vaadin core? It would be good to have it’s theme/style consistent with the main vaadin themes (looks slightly out of place in our chameleon themed app, as its very different from the menu bar & items).
Cheers,
Lee.
Ooops, working screen as mentioned in post above…
Just to point out, switching to a Sass based theme doesn’t mean big changes to your current CSS.
The only things you should need to do:
That’s it. Then just compile. As for add-ons, you perhaps need to create the addons.scss file so that the Eclipse plugin can modify it (I don’t know if it’s created automatically). And also remember to import and include those styles.
As for including ContextMenu to the core, I don’t know, other than I agree that it’s a pretty standard feature to have.
The upcoming theme in Vaadin 7.2 should make it easier for add-on creators to match their components to the theme of the application (using Sass variables and mixins). But there’s nothing currenlty prohibiting them from creating multiple stylesheets for different themes. It’s just a matter of convenience I guess, that most just target Reindeer.
I am having a similar problem. ContextMenu attached to a tree. It pops up fine but then appears transparent. When I look at the DOM it appears that the menu has been attached outside of the main hierarchy so does not pick up the theme css class.
Russell Stather, I had the same problem, using the 4.4.0 version of the ContextMenu add on.
The trick is to import the addon theme outside of your own theme, so the VAADIN\themes\mytheme\styles.scss looks like this:
[code]
@import “addons.scss”;
@import “mytheme.scss”;
/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. /
/ The actual styles should be defined in mytheme.scss */
@include addons;
.mytheme {
// Include mytheme theme styles in your theme
@include mytheme;
}
[/code]And the addons.scss looks like this:
[code]
/* Provided by contextmenu-4.4.0.jar */
@import “…/…/…/VAADIN/themes/contextmenu/contextmenu.scss”;
/* Import and include this mixin into your project theme to include the addon themes */
@mixin addons {
@include contextmenu;
}
[/code]Now if you compile your theme and have a look at the generated style.css file, the .v-context-menu rules will no longer be prefixed with your own theme name ( .mytheme in this example).
I hope it helped.
Cheers
Can I compile the theme using maven or IntelliJ ?..
A have the same problema, my contextmenu appears transparent …