change tabpanel direction

Questions
1

Hi,
i would like to change the direction in the tabpanel (bootstrapcomponents-tabpanel) from top to right.
Different attempts with css like “float: left” did not bring success.
Is this even possible?

BR
Andreas

2

Hi Andreas,

to achieve that you need to target different element within the bootstrap-tabpanel in CSS.
Specifically the tabpanel has such feature: when there are more tabs than available width, the tabpanel will have some sort of pagination allowing the user to navigate tabs.
Changing the direction “top-right” you will have to drop such feature.

Try this CSS:

/* use 100% of available width and disable tabs pagination */
.bts-tabpanel > .nav-tabs {
	min-width: 100%;	
}
/* align tabs to the right */
.bts-tabpanel .nav-tabs li {
	float: right;
}

Regards,
Paolo

3

Hi Paolo,

so far so good, but when I try your code, the upper taps disappear, but no tabs appear on the right side. :roll:

Regards
Andreas

4

Hi Andreas,

i tried the CSS on the Bootstrap Tabpanel. Is working for me.
is this the result you expect (see image below) ?

830×179 3.83 KB

Regards,
Paolo

5

Hi Paolo

no, the result should look like the image below.

[attachment=0]screenshot_4181.png[/attachment]

BR
Andreas

screenshot_4181.png
screenshot_4181.png259×374 2.08 KB

6

Hi Andreas,

sorry for my misunderstanding. Thought you were trying to align the tabs at the top/right corner.

The result you are looking for isn’t officially supported by the bootstrap tabpanel.
With some advanced CSS (see below) i could get close to your desired result in Chrome/Mozilla, not in IE.
However you can easily encounter limitations, e.g. not having enough height to display all tabs, tabs not fitting would be hidden.
I strongly recommend to use a different UI pattern.

.svy-wrapper > * > .bts-tabpanel > .nav-tabs {
   min-width: 42px;   
}

.svy-wrapper > * > .bts-tabpanel > .tab-content {
    right: 42px;
    top: 0;
}

.svy-wrapper > * > .bts-tabpanel > .nav-tabs {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 42px;
    bottom: 0;
    height: 100%;
}

.svy-wrapper > * > .bts-tabpanel .nav > li > a {
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
  	-ms-writing-mode: vertical-lr;
	padding: 10px 5px;
}

.svy-wrapper > * > .bts-tabpanel ~ .absoluteTopRight {
	display:none;
}

Best regards,
Paolo