Disabling Touchkit CSS

Flow
1

Hi.

I’ve got a huge problem with the Touchkit addon. This morning I added our first Touchkit Component to our existing Touch Application for better Touch-Support. I expected of course that I would need to style the new components to fit to our theme, but when I added Touchkit, my first thought was that someone has screwed up the CSS over night, because the layout and some colors we screwed. After I reverted my changes, everything was fine againe. Touchkit screwed up half our theme. After some damage analysis I found that Text, Colors, Layout, Icons, etc. all where affected. After some debuging I found that when I add Touchkit some additional CSS is set in the client, after the widgetset is loaded. Because this happens after the style.css is loaded, a lot of the new rules override the existing ones.

For the last 7h I tried to fix everything, wihtout any end in sight. It is very annoying to find every second element slighty broken. I needed to add a lot of very specific selectors just to reset the values that were overriden by touchkit. This increases the size and complexity of the theme without any reason. For the time being we decided to stop the implementation touchkit components, despite it was one of the main reasons to buy the Pro-Tools.

Is there any way to disable the Touchkit CSS? I couldn’t find any reasonable way to do it.

Also why is it necessry for Touchkit to define additional Colors and Layout option? The Base-Theme already does that. If it is required for mobile application, maybe it would make sense to split the components from the Touchkit, so they can be used in Touch Applications, like any other component added by an Addon.

2

Hi,

Sorry for taking such a long time to get an answer, but I hope this info is still useful to you.

So to override/remove the default TouchKit theme, you need to override the implementation of
ThemeLoader
 using the GWT module descriptor (i.e. .gwt.xml) with deferred binding. The code comment at the beginning states so.

Read the
documentation for deferred binding
, but in the end you should have something like this in your projects .gwt.xml file.

<replace-with class="your.own.implementation.of.ThemeLoader">
  <when-type-is class="com.vaadin.addon.touchkit.gwt.client.ThemeLoader"/>
</replace-with>

Your own implementation can just extend the default ThemeLoader and leave the load() method empty.

I haven’t actually tried this, but it should go along those lines.

3

Thanks for the reply. Looks not so hard to do.

We put the use of Touchkit on hold for the time being, but we will surely come back to it.

4

Hi Sebastian. Did the solution posted by Jouni worked for you? i was having the exact same problem, tried Jouni’s suggestion and it did not work as i expected.

I was wondering if disabling TOUCH-KIT Css styles was possible so they do not override Vaadin Default styles.