How to stack tabs vertically rather then side by side?

I was looking to use Protaculous and html tabs but rather than have them sit side by side horizontally was looking for them to stack vertically and for the selected or tabbed box to open to the right of the tabs.

Is this achievable within the Protaculous function body code or is this another script all together?

Best of luck to Walter on achieving his total for the new Action Forge


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sure. That’s actually easier to do, because you don’t have to force the unordered list to run its members left to right. If you can mock it up with empty HTML boxes for your tabs, one of us can show you how to make the CSS work.

Walter

On Apr 28, 2014, at 5:49 PM, tonzodehoo wrote:

I was looking to use Protaculous and html tabs but rather than have them sit side by side horizontally was looking for them to stack vertically and for the selected or tabbed box to open to the right of the tabs.

Is this achievable within the Protaculous function body code or is this another script all together?

Best of luck to Walter on achieving his total for the new Action Forge


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hello Walter,

Many thanks for your response.
I have set this up:
http://www.adevlinvisual.com/tester/tabssolution.html

Its one html box with the protaculous on the page.
I am aiming to have the headings to stack to the left and the detail boxes on the right beside them.

Look forward to learning.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try adding this in place of the JavaScript you have currently. (You are using Protaculous or Protaculous 2 for this, right?)

The changes are fundamentally in the CSS that the script applies to the elements. The list that holds the tabs is no longer forced to display its members inline, and the list is positioned absolutely relative to the parent container (item1), with its right side set to 100% so it hangs off the left of the parent box. The list is styled with display:table, which is a great hack to make something shrink to the size of its largest content element. Everything else is left more or less alone.

Walter

On Apr 29, 2014, at 4:25 AM, tonzodehoo wrote:

Hello Walter,

Many thanks for your response.
I have set this up:
http://www.adevlinvisual.com/tester/tabssolution.html

Its one html box with the protaculous on the page.
I am aiming to have the headings to stack to the left and the detail boxes on the right beside them.

Look forward to learning.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options