Alignment issue for menu item

I have a menu bar in my view and I want one menu item to be on the right side of the bar and others on the left side. So, my code for the menu bar is:

MenuBar userMenu = new MenuBar();

MenuItem logout = userMenu.addItem("Log Out", new ThemeResource("icons/logofficon.jpg"),new MenuBar.Command() {

public void menuSelected(MenuBar.MenuItem selectedItem) {

// "Logout" the user

getSession().setAttribute("user", null);

// Refresh this view, should redirect to login view

getUI().getNavigator().navigateTo(SimpleLoginMainView.NAME);

}

});

MenuItem issue = userMenu.addItem("Issues", null);

MenuItem admin = userMenu.addItem("Admin", null);

MenuItem raise = userMenu.addItem("Raise an issue", null);

logout.setStyleName("menuRight");

I have added a CSS class to the styles.scss file of my project theme that I have given below. But when I run the code, the menu item “logout” is always on the left side, irrespective of whether I define it first or last in the list of menus. Help me to figure out the problem.

.v-menubar-menuitem-menuRight {

float: right;

}

I think it would be best to also add the logout menu item last. Your CSS is correct, but I’d move it your project’s theme file instead of having it in styles.scss.

The logout menu item is still aligned to the left after moving the logout item to the last. Also, I moved my CSS to my project’s theme file based on your advice on
this
thread. But still, I am not able to get it right.

What theme are you using? Have you set the width of the menubar to 100%? Clean out any caches as well.

I got it right now. It was my mistake. I have specifed the theme as valo in my UI class. But I wrote my CSS inside myProject theme folder under /VAADIN/themes directory (which included valo). When I changed the theme to myProject in the @Theme annotation, it worked.

Anyway, thanks for your help Joacim.

Hi Team , i’m new to vaadin framework and its blog. Don’t know how post a separate thread for my query . Therefore i’m posting in this thread.

I have a resultant table in which i would fetch the data from database and display to the user. Here i required to generate Sl.No for the list of datas displayed. I used
“Table.ROW_HEADER_MODE_INDEX”
in my colum where i’m generating Sl.No. As expected the Sl.No’s are displayed. But the problem is , i couldn’t name this column (i.e.) i couldn’t give an header for this column. Therefore header is blank , but the column has data. Kindly let me know how can i create a header or name for this column , when i use "
Table.ROW_HEADER_MODER_INDEX
" for generating the table index no or sl.No.

Thanks All.

Hi Vijaya. There are 11 categories in this forum and they are listed
here
. Click the one which seems to be the correct place to post your thread. You can see a New Topic button to the right, above the list of threads. Click it and you will be taken to a page where you can create a new thread.

Thanks Dinesh for guiding me in this. I have posted a separate thread under specific category.

Thank you.