tokenfield styling

I’m trying to using the tokenfield addon. My problem as that the tokens are displayed as plain blue text with an underline and an associated cross (delete) icon rather than the nice blue coloured block that is show in all of the demonstrations.
I’m guessing its a problem with the tokenfield.css not being injected into the page.
I can see the tokenfield.css in the tokenfield.jar but I don’t understand how its meant to be injected into the page.
I also don’t understand how to check if its injected into the page.
Using firebug to look at the styling on the demo site of a token I see the following:
One ×

With the following style attached.
.tokenfield .v-button-link .v-button-caption {
color: #FFFFFF;
text-decoration: none;

On my web application I see:
sasd ×

with the following styling attached.
.reindeer .v-button-link .v-button-caption {
color: #1B699F;
font-size: 12px;
font-weight: normal;
line-height: inherit;
text-shadow: none;

Thanks in advance for you assistance.

Hi all,

I’m having the same issue, how is this resolved?

Thanks in advance.

I still haven’t resolved it.

Can anyone on the vaadin team help?

So finally worked out what the problem was.

Basically its a mix of a conflict between styling and the fact that I over-rode the configureTokenButton method.

So to get the nice blue flat rectangle with a cross to remove a tag you need call:


during configureTokenButton.

The tokenfield class does this but if you overload the above method you need to be sure to do it yourself.

Secondly I had also called the method

This method which is designed to style the token input field conflicts with the BUTTON_LINK style on the button and all you get is a hyper link rather than a button.

So in the end I used:


on the actual tkenfield as this gives me a nice combo box my users can select from

and I used


to style the buttons and the result is just what i wanted.

You can check out the full source code at github:

I’m still facing this issue. I’ve extended TokenField (even though i did not need to) and just called super.configureTokenButton(tokenId,button); button.setStyleName(Reindeer.BUTTON_LINK);
while overriding configureTokenButton in the extended Token Field.
Also called tf.setStyleName(TokenField.STYLE_TOKENFIELD);

Got it ! I’m using the Netbeans Vaadin plugin.
Basically the AppWidgetSet.gwt.xml which gets created in the project needs to be included in the web.xml.

I found the details here -

So ran the maven vaadin:update-widgetset command
then included a new in web.xml.
Then clean and build .
And lo behold !