A few Valo Issues...


There are a few issues in Valo that I would like to bring to your attention. Note that it is only Valo these issues exist on, all other themes behave correctly.

  1. After ‘maximising’ or ‘minimising’ a window using the icons on the title bar, layouts are not rendered correctly until the user does something else on the client window (e.g. they resize, or press another button).

  2. The ‘sort’ icon on table headers is mixed up (shows ascending when it should be descending…)

  3. The MenuBar. When this is activated, the sub-menu pop-ups are shown automatically as you scroll the mouse over the top-menu headers. However, the sub-menu pop-up often just disappears when you stop moving the mouse (especially if you have been moving the mouse fast). It can be brought back be moving the mouse out of and back into a top-menu header again, but its fairly untidy for the user. You can see this behaviour on the valo theme demo.

You can see issues 1 & 2 in this small stand-alone program.

Start the dialog, and then resize using the “+” button. The table does not grow as it should. Resize the window, and only then does the table adjust. Same with minimise. Change the theme (to reindeer) and repeat the test, the table adjusts correctly immediately. We have lots of complicated re-sizable dialogs in our app, and this behaviour is a bit distracting!

import com.vaadin.annotations.PreserveOnRefresh;
import com.vaadin.annotations.Theme;
import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Table;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class MyUI extends UI
boolean valoTheme = true;

public void init(VaadinRequest vaadinRequest)
    Button startButton = new Button("Show Dialog");
    startButton.addClickListener(new ClickListener()
        public void buttonClick(ClickEvent event)

private void showDialog()
    final Window w = new Window("Test Dialog");
    VerticalLayout vl = new VerticalLayout();
    Table table = new Table();
    // Define two columns for the built-in container
    table.addContainerProperty("Name", String.class, null);
    table.addContainerProperty("Age",  Integer.class, null);
    table.addItem(new Object[]{"Adam",  40}, 1);
    table.addItem(new Object[]{"Joe",   37}, 2);
    table.addItem(new Object[]{"Zack",  21}, 3);        
    HorizontalLayout hl = new HorizontalLayout();
    Button b1 = new Button("Change Theme", new ClickListener()
        public void buttonClick(ClickEvent event)
            if (valoTheme)
                valoTheme = false;
                valoTheme = true;
    Button b2 = new Button("Close", new ClickListener()
        public void buttonClick(ClickEvent event)
    vl.setExpandRatio(table, 1);
    vl.setComponentAlignment(hl, Alignment.BOTTOM_RIGHT);
    // build the window & show it

[/code]Great theme, and our users are going to love it!

Hi Lee, and thanks for the feedback!

All of these are pretty much known issues at this point, but unfortunately haven’t been fixed yet.

  1. is caused by the fact that the LayoutManager (client side class that handles element sizing when needed) doesn’t understand CSS transitions/animations, and hence the layout phase is triggered before the window resizing animations is completed, and the contained component receives incorrect size information. As a workaround, you can either set
    $v-animations-enabled: false;
    or disable the animations for just the Window with the following CSS
.v-window {
  @include transition(none);
  1. I heard about this only last week I think, and it was really embarrassing :frowning: Should be an easy fix, and as a workaround you can the override the corresponding mixins:
@mixin valo-table-sort-asc-icon-style {
  content: '\f0de';
  font-family: FontAwesome;

@mixin valo-table-sort-desc-icon-style {
  content: '\f0dd';
  font-family: FontAwesome;
  1. This issue is also related to having CSS animations for the sub menus, and the VMenuBar widget not caring about that. I didn’t have enough sub-menus in my development time test so this never caught my eye until after release. As a workaround you can also disable the animation for the menubar submenus:
.v-menubar-popup.v-menubar-popup-animate-in {
  @include animation(none);

Hope this helps! I will check and make sure there are tickets about these issues and that they get fixed at some point.

Thanks for the reply!
I have fixed these issues using your suggestions.

NOTE: Your suggested fix to disable the menu bar popup (3) didn’t work. In the end I had to disable the animations system-wide, which is a shame (I like the animations, it gives a nice modern feel to our app!)

Ah, sorry, my mistake. “animate-out” should be “animate-in”. So try this instead.

.v-menubar-popup.v-menubar-popup-animate-in { @include animation(none); } I fixed the previous post as well.

Also FormLayout no more has captions aligned to the right of the TextField as is in other themes.

That’s true, and it really should be customizable with a simple style name for the form. Feel free to add a new enhancement ticket about that. It’s also easy to create the style yourself:

// Java

// CSS
.v-formlayout-caption-align-right .v-formlayout-captioncell {
  text-align: right;

Thanks. Works. But a few server restarts and refreshes, then it doesn’t. Currently its random

Hi Jouni,

are you expecting a fix for #1 in the near future, or do you still recommend the suggested workaround?


Hi Auke,

I don’t know that fix would be coming, but I haven’t even checked if there’s a ticket about this issue in Trac (I apologize for not creating one). Would you have the energy to check if a ticket exists and create one if it doesn’t?

Sure, I’ll have a look. Might be a tricky one to fix though.

Here it is:
. Maybe the title should mention that the problem occurs specificly with the Valo theme?

Thanks for finding that. Yeah, should be about Valo only.