Tab sheet Center Menu: CSS

Vaadin 6 / 7 / 8 Framework UI
1

I have been trying to center my tabs in a vaadin tabsheet so that they are in the middle, does anyone have any CSS examples of how to do this. #centeredmenu { float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; } #centeredmenu ul { clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; } #centeredmenu ul li { display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; } #centeredmenu ul li a { display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; } #centeredmenu ul li a:hover { background:#369; color:#fff; } #centeredmenu ul li a.active, #centeredmenu ul li a.active:hover { color:#fff; background:#000; font-weight:bold; }

This CSS does not work

2

Without looking right now at the tabsheet code and your css, I rembed that I have tried to theme the tabsheet but it has so much defined widths and such that doing something as dramatic as moving them to the middle might not be possible.

What I have usually done when I needed more out of a tabsheet is to replace it with a HorizontalLayout filled with buttons and a Panel below it, and simulate the tabsheet trough that. Then you can do pretty much what ever you like and it isn’t that hard either.

3

I like that suggestion alot better as i am having so much difficulty styling the tabsheet.

One question about the “horizontal layout” with buttons method, how can i then insert different custom component views dynamically into a single panel and then wire them up on button click events?

—To clarify, lets say i add Home Administration Security buttons in a tab layout and want to create three custom component classes, how then can i change a single v-panel to switch between these views on button clicks?

4

so you got the a view where the "tabsheet is in. You have the three buttons and a panel in it.

public class extends VerticalLayout implements Button.ClickListener{
  private Button homeButton;
  private Button administrationButton;
  private Button securityButton;
  private Panel content;
}

then you implement a clicklistener in the class (as the “implements” above suggests).

homeButton.addListener(this);
administrationButton.addListener(this);
securityButton.addListener(this);
public void onClick(ClickEvent event){
  if(event.getButton().equals(homeButton){
    content.setContent(homeScreen);
  } else if(event.getButton().equals(administrationButton){
    content.setContent(administrtionScreen);
  } else if(event.getButton().equals(securityButton){
    content.setContent(securityScreen);
  }
}

I suggest you use rather CssLayout than HorizontalLayout in the tabs. It is easier to theme.

5

How can i use CSS layout in the eclipse visual editor, it does not show up as one of the components?

6

I don’t use visual designer myself. You can make a feauture request for that in dev.vaadin.com, but you could also just do it with plain java.

7

Since i decided to use a CssLayout for my navigation “tabsheet”, i am having difficulty implementing the selected styling of each native button or in my case “tab”.

The problems:

  1. When a button is clicked(), i want to show the user which tab there currently in by displaying a background image behind the button and if the user decides to select another native button in my Csslayout, i want to remove the background image of the previous selected button and display it on the newly selected button? Is this possible?

I have tried something like this: Not working and i fear of performance issues

Button button1, button2
button1.addListener(new ClickEvent()){

button.checkState(); // if there are no other button selected then i want to set the background image for this button ?

}
  1. What are some other ways to implement a tabsheet where all button are essentially in synch?
8

I’ll do it by adding a style name to a button when it is clicked, and removing the style name from the one that was clicked before it. Have a class variable called Button currentTab = null, then do this is in the click listener

{{{
event.getButton().addStyleName(“selected”);
if(currentTab != null){
currentTab.removeStyleName(“selected”);
}
currentTab = event.getButton();
}}}

I would also use normal Buttons instead of NativeButtons. I find them easier to theme.