How can I add menubar styles to horizontal layout

Hi,
I built a tool bar with horizontal layout which has several buttons but I want menu bar styles to be added to it. I tried using css layout but css layout doesn’t solve my purpose completely as I right align 3 buttons and left align 5 buttons using set expand ratio in horizontal layout and css layout doesn’t have setexpandratio method.

So can anyone tell me way to make horizontal layout style similar to menubar/toolbar styles.

There is a couple of options.You could use css float to mimic expand ratios. You could also put most of the theming on the buttons themselves, not requiring you to theme the horizontal layout. You could also wrap the horizontallayout into a csslayout and theme that csslayout to add your menu styles.

This is assuming your on Vaadin 6. In Vaadin 7 you have the possibility to theme the horizontallayout directly.

Hi Jens,
Thanks for the response. I solved this by addin following styles in css

   .v-button-floatright { float:right !important;}

and applying styles to buttons I want to be right align in csslayout

     button.addStyleName("floatright ");

Sample code, lets say I want to right align 2 buttons

CssLayout menubar = new CssLayout ();
menubar .addStyleName("toolbar");
Button b1 = new Button();
Button b2 = new Button();
Button b3 = new Button();
Button b4 = new Button();

//applying right align styles to buttons b3, b4
b3.addStyleName("floatright");
b4.addStyleName("floatright");

menubar.addComponent(b1);
menubar.addComponent(b2);
menubar.addComponent(b3);
menubar.addComponent(b4);

Works like a charm in firefox, not yet tested in other browsers. If anyone has any better way of doing this please respond.

Looks good! Only thing I have a little gripe about is the word ‘!important’. It might not be a actual case for you, but it makes it a lot harder to override in a later stage, just like you have overridden the default value from the Vaadin theme. It is better to make it more specific than that that you want to override, for example your code might not be the most accurate without the !important word, but it might be if you change it to .v-button.v-button-floatright { float:right; }

It is just a good practice to learn not to use !important. a more realistic case can be that you make a default font globally for your application and mark it with !important, then you want to change the font for buttons, and you’ll have a bit harder to make it as there isn’t something called !superimportant

Hi Jens,
Thanks for the correction. I removed !important and specified style as you said. It worked.