Vertical tab menu items


#1

Hi all

A customer of us would like to implement tabs into some of their forms, but rather than showing the tabs as horizontal tab items, they would like to show the tab items vertically like in the following wireframe:

Wireframe_VerticalTabs

They have been successful in implementing horizontal tabs using button groups and buttons with custom.css styling already:

Do we have some ideas how they could implement a vertical tab control using existing form capabilities?!


#2

The sidebar tabs can be achieved using the solution described below. Please note that this is merely a slightly adjusted version of the Tab View posted here.

  • Create a form called “Sidebar” and follow the steps 1 to 6 outlined in the “Tab View” guide linked above. In the end, you should have a subform containing all the entries of your sidebar.
  • Create a second form called “Content”. There, follow the steps 7 and 8 of the guide. The result should be a form containing other subforms, each of which represents the content of a tab.
  • Create a third form called “Master” where you combine the two above. First, add the “Sidebar” form as a subform. Make sure that it only occupies the left-most column of the grid. Then add the “Content” as a subform and let it take up the rest of the space. In the end, you should have two forms on one row. Finally, add the style class “tab-sidebar” to the first subform and “tab-content” to the second widget. This allows you to further style the contents. For instance, in your custom.css file. This allows you to specify the width of the content and the sidebar, for instance like this:
.tab-sidebar {
   width: 30%;
}

.tab-content {
    width:70%;
}

Using this solution, you can basically exploit the “responsive” feature of our grid layout. Since the “tab view” will only take up one column, each button (i.e. navigation element) will be moved to a new line.

Of course, you still need to style the buttons to give them a tab-like look.


#3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.