Valo menubuttom click focus problem

Flow
1

Hi,

I have a problem with valo (only with that theme), when i used Valo theme my menubar dont work. I trace the problem to the css (.v-ddwrapper-over:before) with the z-index:10 but in browser it looks like overwriten.
The menubar its inside a VerticalLayout, on the top (like a “windows menu”)
Does anyone had the same problem? any tip?

Regards,
m.

2

Do you have the menubar inside a drag-and-drop-wrapper? If not, can you post the layout structure you have in your app.

3

Hi Jouni, thanks for the answer. The menu its on the top layer of the Verticuallayout.
This is the snippet of the code if u want to try out.

[code]
@Theme(“valo”)
public class MyVaadinApplication extends UI {

@Override
public void init(VaadinRequest request) {
    VerticalLayout layout = new VerticalLayout();

    Panel pMenu = new Panel();

    MenuBar menu = new MenuBar();
    menu.setWidth(100.0f, Unit.PERCENTAGE);


    MenuBar.MenuItem nivel_1 = null;
    MenuBar.MenuItem nivel_2 = null;
    nivel_1 = menu.addItem("Presupuestos", null);
    nivel_2 = nivel_1.addItem("Alta", null, null);
    nivel_2.addItem("Consultas", null, null);
    nivel_2.addItem("Trabajos", null, null);
    nivel_2.addItem("Dirección de Obra", null, null);
    nivel_1.addItem("Mantenimiento", null, null);


    nivel_1 = menu.addItem("Mantenimientos", null);
    nivel_1.addItem("Arquitectos", null, null);
    nivel_1.addItem("Consultorios", null, null);
    nivel_1.addItem("Clientes", null, null);

    nivel_1 = menu.addItem("Reportes", null);
    nivel_1.addItem("SAU",      null, null);
    nivel_1.addItem("Consultorios", null, null);
    nivel_1.addItem("Arquitectos", null, null);

    pMenu.setHeight(5,Unit.PERCENTAGE);
    Panel pContent = new Panel();




    pMenu.setContent(menu);
    pMenu.setSizeFull();
    pContent.setSizeFull();
    layout.addComponent(pMenu);
    layout.addComponent(pContent);
    setContent(layout);

    showBorders(pMenu, pContent);
    this.setSizeFull();
}


private void showBorders(Panel pMenu, Panel pContent) {
    String style = "v-ddwrapper-over";
    setStyleName(style);
    pMenu.setStyleName(style);
    pContent.setStyleName(style);
}

}
[/code]I try in IE, Chrome and it doesnt work with valo theme, but it works with any other theme. z-index:10 looks overwritten but i cant notice where.

regards

4

problem solve, finally i figure it out.

regards,
m.

5

How to get rid of this white block from the valo menu? I am attaching an image for clarification. I just want that user icon with drop down menu… but I don’t want the rectangular white block.
19111.jpg

6

Looks like you have an empty button there for some reason.

7

Hei Jouni,

Thanks for your comment. I have two simple questions for you…

a) How do you change the color of the menu items… for example, if have menu like "
File
", "
Edit
" and "
View
" etc… and the color is let’s say pink … but how do I change it to white ? and also change the font to let’s say, Calibri Regular.

b) If I put the valo menu items and the icon seperately in the menu item than how do I arrange horizontally ? I hope you understand what I mean here… I mean, like the top-menu bar of Vaadin site.

8

Hey Keto,

I’d probably recommend setting the background color of the v-menubar-popup element.

.v-menubar-popup {
  background-color: white;
}

Or if you want, you can also set it for v-menubar-menuitem, but I wouldn’t recommend that, as there is padding on the v-menubar-popup element by default.

9

You could do the following. If I understood you correctly.

.v-menubar-popup .v-menubar-menuitem .v-icon {
  display: block;
  margin-right: 0;
}
10

Thanks for your answer.

11

Dear friends,

How do you create horizontal-sub menu in Vaadin? I know I can easily create a simple drop down menu, but I am struggling to create a
horizontal sub-menu
 in Valo.

I am attaching a image for clarification.
19142.jpg

12

Hey Keto,

Hmm, you could go the client-side route. Or perhaps simply show/hide a horizontal layout containing the sub menu items.

13

Thanks for your answer. Unfortunately, it doesn’t work. The menu color is not white with the above css … I also tried setting it for v-menubar-menuitem… even that doesn’t seem to work.

14

I’m sorry… I don’t understand what you mean by ‘client-side route’. How do you show and hide horizontal layout? Could you please give an example.

15

Make sure your theme isn’t compiled, i.e. the theme folder doesn’t contain a styles.css (not .scss) file.

16

Client-side:
https://vaadin.com/book/-/page/clientside.html
.

Most Vaadin components can be shown/hidden with setVisible(boolean).

17

So I delete the styles.css?

18

Yes. And make sure your theme changes or additions are located in the .scss.

19

Thanks for your answer. Is there any other way … I can change the menu text color without deleting the styles.css? I put in .scss following line:

$v-focus-color: #fff;

and magically the menu text is working nicely with white text… however, when I remove this … it changes to dark blue. Is there any other way… I can keep the menu text white.

20

Hey Keto,

The magic is explained here:
https://vaadin.com/book/vaadin7/-/page/themes.valo.html
.

If you inspect the DOM structure of the menu bar and its items, you can check where the items get their color from. Then simply override that in your theme.