Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
TabBarView (TouchKit) bottom buttons are placed as in VerticalLayout
I am trying to learn TouchKit.
I want to make TabBarView bottom buttons ("Ticket", "24h Map", "Shifts", "Stats") to appear as in Vaadin parking demo, each placed to each other horizontally.
What I get, is each of my bottom buttons are placed vertically to each other (as in VerticalLayout), as shown in screenshot.
What I am doing wrong? How should I make my TabBarView bottom buttons placed to each other horizontally?
I tried looking at Parking demo source code ( https://github.com/vaadin/parking-demo ), but I can't see any clues... :(
My source code:
main.MainUIWidgetset.gwt.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name="com.vaadin.DefaultWidgetSet" />
<inherits name="com.vaadin.addon.touchkit.gwt.TouchKitWidgetSet" />
</module>
main.MainServlet.java
package main;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import com.vaadin.addon.touchkit.server.TouchKitServlet;
import com.vaadin.annotations.VaadinServletConfiguration;
@WebServlet(value="/*", asyncSupported=true)
@VaadinServletConfiguration(ui=MainUI.class, productionMode=false)
public class MainServlet extends TouchKitServlet {
private static final long serialVersionUID = 3477266251485781815L;
@Override
protected void servletInitialized() throws ServletException {
super.servletInitialized();
}
}
main.mainUI.java
package main;
import com.vaadin.annotations.Widgetset;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.UI;
@Widgetset("main.MainUIWidgetset")
public class MainUI extends UI {
private static final long serialVersionUID = -6001077028626247259L;
@Override
protected void init(VaadinRequest request) {
setContent(new TabBarViewExample());
}
}
main.TabBarViewExample.java
package main;
import com.vaadin.addon.touchkit.ui.TabBarView;
public class TabBarViewExample extends TabBarView {
private static final long serialVersionUID = -193941031614717987L;
public TabBarViewExample() {
addTab(new ViewOne(), "ViewOne");
addTab(new ViewTwo(), "ViewTwo");
}
}
main.ViewOne.java
package main;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
public class ViewOne extends VerticalLayout {
private static final long serialVersionUID = 4915889088478051671L;
public ViewOne() {
addComponent(new Label("Welcome to ViewOne!"));
}
}
main.ViewTwo.java
package main;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
public class ViewTwo extends VerticalLayout {
private static final long serialVersionUID = 4316141496604132496L;
public ViewTwo() {
addComponent(new Label("Welcome to ViewTwo!"));
}
}
P.S. I'm using Vaadin 7.6.8, TouchKit 4.1.0, JDK 1.8.0_101, Tomcat 9.