Vertical Tabs in WebMaker?

Submitted by Taeho.BPM on Tue, 10/06/2015 - 18:33

Is there a way or UI control to show tabs vertically not horizontally?

Currently, WM provides a horizontal tab control. Is there any way to configure the control to display vertically?

Thank you,
Taeho.BPM

RE: Vertical Tabs in WebMaker?

Hi Taeho,

You should be able to configure a tab control to be displayed vertically by adjusting the CSS applied.

As an example, if you are using the 'calm blue' theme in WebMaker 8 then you should be able to do this by adding the following CSS fragment to a custom CSS file.


/* Vertical Tabs */

.tabContainer.verticalTabs > .formElement .controlBody
{
    margin : 5px 0px;
}
.tabContainer.verticalTabs > .formElement
{
    border-bottom : none;
    border-right : 1px solid #ddd;
    float : left;
    min-width : 100px;
    text-align: right;
    padding-left : 5px;
}

.tabContainer.verticalTabs .unselectedTab, .tabContainer.verticalTabs .selectedTab
{
    border-top : 1px solid white;
    border-left : 1px solid white;
    border-bottom : 1px solid white;
    border-right : 0px;
    padding: 15px 10px;
    margin : 1px 0px;
    float : right;
    clear : both;
}

.tabContainer.verticalTabs .selectedTab
{
    border-color : #ddd;
    border-right : 1px solid transparent;
    margin-bottom : 0px;
    margin-right : -1px;
}

.tabContainer.verticalTabs .tabPane {
    padding-top : 0px;
    padding-left : 10px;
}

You would then add the verticalTabs class name to the tab container group for the tabs you wish to change. This should change the tabs from appearing like the top set in the screenshot below to instead displaying like those at the bottom.

I hope this helps.

If you are using a different theme or WebMaker version, then you would need to adjust this CSS accordingly. If you can let me know the details of what you are using (or provide a project export) then I can look into this further.

Regards,
Gerard

attachment

vertical_tabs.png