NavigationView .. setToolbar... caption not visible

Vadding 7.4.2 and touchkit 4.0.0

if I use: Toolbar toolBarLayout = new Toolbar();
and add 3 buttons all looks fine

if instead I use: HorizontalLayout toolBarLayout = new HorizontalLayout();
and add the same 3 buttons, I see the button but no Caption is visible. any explanation why I am not seeing the caption?

the Vaadin Book states:
"A slot for an optional toolbar is located at the bottom of the NavigationView. The toolbar can be
any component, but a Toolbar component made for this purpose is included in TouchKit. It is
described in Section 20.7.2, “Toolbar”.You could also use a HorizontalLayout "

my code:

public class MyListView extends NavigationView {

private Table myList = new Table();

public MyListView() {
    setCaption("My List");
    //HorizontalLayout toolBarLayout = new HorizontalLayout();
    Toolbar toolBarLayout = new Toolbar();
    Button listButton = new Button("List1");
    toolBarLayout.addComponent( listButton);
    Button detailButton = new Button("List2");   
    toolBarLayout.addComponent( detailButton);
    Button detail2Button = new Button("List3");   
    toolBarLayout.addComponent( detail2Button);



It should work with a HorizontalLayout as well. I tried it quickly with the NavigationView/Toolbar example in
TouchKit Sampler
and it worked just fine, so I don’t know what your problem could be. The buttons are styled differently in a HorizontalLayout, so that could cause some trouble. The setSizeFull() is probably safe to do, but it is a bit suspicious to set 100% height there, as the tool bar only has a fixed height.

Hi Marko,

thanks for all your help.

I am totaly stuck with this toolbar buttons.

something is wrong with the button caption - the buttons are visible but the caption in it is not visisble;

even when I add a simple button into my VerticalLayout I see the button but no caption is visisble.

I do not use any css customization… this is just a simple test app…very frustrating

    Button btn1 = new Button("BTN1");

I even took the code from the TouchKit Sampler as the view, and even that in my app has not button captions.

what would make the Button Captions not be visible???

It’s hard to say what the problem could be, there’s always many ways that can go wrong in an application. I hope your theme is OK, I remember that you had some themeing problems earlier.

When inspecting such problems, it’s always a good practice to simplify the code to minimum, perhaps by creating experimental classes, and narrow the problem down. Sometimes even create a fresh project to see if the problem occurs there.

Hi Marko,

I been doing exactly what you are recommending, creating a new project and stillhaving button with no caption visible.
My java code is very small (10-15 lines) amybe can someone review and see what is that I am doing wrong.
I need kick of a mobile project, but first need to get over some hurdles and gain confidence on the UX / UI capability of the TouchKit add-on.

here are my steps…
-create a vaadin 7 project
-added the following to ivy.xml

-copied vaadin-touchkit-agpl-4.0.0.jar to \web-inf\lib folder
-Compiled WidgetSet and Theme via the eclipse toolbar

my two VERY short java files are attached

aron (953 Bytes) (534 Bytes)

Hi Marko,

it seems I am not the only one with this mistery… take a look at thread #9485713

just adding to my toucht1.scss file the lines bellow made the button captions visible.

.v-button-wrap {
display: inline;
this makse no sense, you might want to explore where the problem originates