Buttons lack text when using the "valo" theme with the TouchKit widgetset

[steinarb]

See the thread Text missing from buttons in valo theme. This has been an issue back with Vaadin 7.x and TouchKit 4.x as well.

However with Vaadin 8.x and TouchKit 5.x the only theme where the grids (that have replaced tables) look properly, is valo. And with valo the buttons don't display text.

So it would be nice to have this problem fixed.

[steinarb]

As this posting on the thread shows, the offending CSS style, is this one:

.v-button-wrap {
    display: block;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

Removing the "display: block" from this rule makes button text reappear when using valo with the TouchKit widgetset.

But I don't know if this is the correct fix.

[mstahv]

I think this relates to the fact the touchkit theme is designed to be used as such, without valo theme, so there are collisions.

There would basically be two options:

• extend touchkit theme so that it supports Grid. I'd say this is the best way to solve the issue
• more rules (and possibly stronger selectors) to the touchkit theme so that collisions with Valo theme are handled properly

What do you think?

[steinarb]

From my point of view getting workable grid formatting would be the best way to proceed in the short term. Then I can use the TouchKit theme and have stuff working like it did with Vaadin7/TouchKit4

Handling collisions with the valo theme better also sounds like a good thing. But from my point of view this can wait until the Vaadin8/TouchKit5 version works at least as well as the Vaadin7/TouchKit4 version did.