Posted by BuyBub.com on January 24, 2009 at 1:29pm
Jump to:
| Project: | CCK Fieldgroup Tabs |
| Version: | 6.x-1.x-dev |
| Component: | Miscellaneous |
| Category: | feature request |
| Priority: | normal |
| Assigned: | BuyBub.com |
| Status: | active |
Issue Summary
Hi,
Is there an easy way to tweak code or CSS so that my group tabs display vertically instead of horinzontally?
Comments
#1
I too want this feature. R project managers considering this?
#2
Is there any update on this ? i do need this
#3
Yes, with css.
For example:
#tabs- .ui-tabs-nav {
position:absolute;
top:134px;
left:-5px;
width:200px;
height:200px;
z-index:100;
padding:20px 20px;
background:#444;
}
#tabs- .ui-tabs-nav li {
display:block;
margin:10px 0 0 0;
}
ul.primary li.active a {
background-color:#444;
border-color:#BBBBBB #BBBBBB #FFFFFF;
border-style:solid;
border-width:0px;
color:#DFB579;
}
ul.primary li a {
background-color:#444;
border-color:#BBBBBB;
border-style:solid solid none;
border-width:0px;
height:auto;
margin-right:0.5em;
padding:0 ;
text-decoration:none;
}
ul.primary li a:hover {
background-color:#444;
border-color:#CCCCCC #CCCCCC #EEEEEE;
text-decoration:underline;
}
ul.primary li.active a {style.css?l (Linie 2321)
background-color:#555555;
border-color:#BBBBBB #BBBBBB #FFFFFF;
border-style:solid;
border-width:0;
color:#DFB579;
}
ul.primary {
border-bottom:0px solid #BBBBBB;
border-collapse:collapse;
height:auto;
line-height:normal;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:5px;
padding:0 0 0 1em;
white-space:nowrap;
}
#4
I achieve the vertical tabs look using CSS, perhaps this can be added to the module as option to output a CSS class
#tabs-tabset:before, #tabs-tabset:after { content: ""; display: table; }
#tabs-tabset:after { clear: both; }
#tabs-tabset { zoom: 1; }
#tabs-tabset span.clear {
clear: none;
}
#tabs-tabset .ui-tabs-panel {
border: 1px solid #ccc;
margin-left: 159px;
padding: 12px 24px;
}
#tabs-tabset .ui-tabs-nav {
background-color: #eee;
float: left;
padding: 0;
width: 160px;
white-space: normal;
}
#tabs-tabset .ui-tabs-nav li {
border: 1px solid #ccc;
border-top: none;
display: block;
}
#tabs-tabset .ui-tabs-nav li:first-child {
border-top: 1px solid #ccc;
}
#tabs-tabset ul.primary li a {
background: #eee;
display: block;
font-weight: bold;
padding: 6px 12px;
}
#tabs-tabset ul.primary li.ui-tabs-selected {
border-right: 1px solid #fff;
}
#tabs-tabset ul.primary li.ui-tabs-selected a {
background: #fff;
color: #444;
}