Problem/Motivation

Drupal core includes a vertical tabs implementation, but no support for horizontal client-side tabs. In Drupal 6 the Tabs module provided a client-side tabs API, but that module is not being continued for Drupal 7.

Tabs are a commonly used interface element. It would be valuable to have a horizontal tabs implementation alongside the other existing elements provided by Elements.

Proposed resolution

Provide a horizontal tabs implementation closely mirroring the vertical tabs provided by Drupal core.

This approach does not use the tabs library that ships with Jquery UI.

An initial commit was made in a new branch of Elements, 1034690-horizontal-tabs.

Remaining tasks

  • Patch needs review by Elements maintainer.
  • Write tests for horizontal tabs. Existing patch includes only a stub test. Should be feasible to crib and adapt from FormsElementsVerticalTabsFunctionalTest in core.
  • Assess/address Chrome display issue noted in #72.

User interface changes

Will provide a new horizontal tabs user interface element.

API changes

Provides a new element type, 'horizontal_tabs'.

Original report by Dave Reid

The Field group module contains a 'Horizontal tabs' element that would be nice if it could be re-used by other modules easily. Also, not having summaries makes them easier to use as well.

Files: 
CommentFileSizeAuthor
#50 elements_horizontal_tabs_1034690_50.patch0 bytesbforchhammer
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]
#56 elements_horizontal_tabs_1034690_56.patch13.83 KBbforchhammer
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch elements_horizontal_tabs_1034690_56.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#54 elements_horizontal_tabs_1034690_54.patch13.79 KBbforchhammer
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch elements_horizontal_tabs_1034690_54.patch. This may be a -p0 (old style) patch, which is no longer supported by the testbots.
[ View ]
#51 elements_horizontal_tabs_1034690_51.patch13.72 KBbforchhammer
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch elements_horizontal_tabs_1034690_51.patch. This may be a -p0 (old style) patch, which is no longer supported by the testbots.
[ View ]
#49 elements_horizontal_tabs_1034690_49.patch13.71 KBStalski
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#46 elements_horizontal_tabs_1034690_46.patch3.68 KBStalski
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]
#44 elements_horizontal_tabs_1034690_44.patch3.66 KBStalski
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]
#43 elements_horizontal_tabs_1034690_42.patch3.83 KBStalski
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]
#11 elements_horizontal_tabs2.patch9.31 KBjames.elliott
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]
#3 elements_horizontal_tabs.patch9.37 KBjames.elliott
FAILED: [[SimpleTest]]: [MySQL] Invalid patch format in elements_horizontal_tabs_0.patch.
[ View ]
#2 elements_horizontal_tabs.patch3 KBjames.elliott
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Comments

BenK’s picture

Subscribing

james.elliott’s picture

Status:Active» Needs review
StatusFileSize
new3 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

This patch adds the horizontal tabs implementation from http://drupal.org/project/ux_elements

james.elliott’s picture

StatusFileSize
new9.37 KB
FAILED: [[SimpleTest]]: [MySQL] Invalid patch format in elements_horizontal_tabs_0.patch.
[ View ]

Ignore the last patch, I forgot the -N switch to add the necessary css and js files

Status:Needs review» Needs work

The last submitted patch, elements_horizontal_tabs.patch, failed testing.

james.elliott’s picture

Status:Needs work» Needs review

#3: elements_horizontal_tabs.patch queued for re-testing.

Status:Needs review» Needs work

The last submitted patch, elements_horizontal_tabs.patch, failed testing.

nedjo’s picture

Good addition to Elements.

I'd like to deprecate the tabs module in favour of a horizontal tabs element in Elements. See #1056562: Deprecate Tabs module for D7 in favor of Elements.

james.elliott’s picture

I'm not sure why this is failing testing. I'll have to scrub the line endings and then reroll.

Vc Developer’s picture

Subscribing!

ogi’s picture

subscribe

james.elliott’s picture

StatusFileSize
new9.31 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Retrying with a scrubbed line ending patch

james.elliott’s picture

Status:Needs work» Needs review
ogi’s picture

subscribe

ogi’s picture

Status:Needs review» Needs work

I tested #11 and it works except that all tab titles are prepended with "Hide ". The reason is that fieldset legend is <span class="fieldset-legend"><a class="fieldset-title" href="#"><span class="fieldset-legend-prefix element-invisible">Hide</span> TAB</a><span class="summary"></span></span> and it's taken with $.text() which removes all markup including .element-invisible. I tried to use .html() instead of .text() but extra borders appear and CSS needs to be fixed too.

bryancasler’s picture

subscribe

Danny_Joris’s picture

subscribing

Dave Reid’s picture

Started an issue branch just for this: git clone --branch 1034690-horizontal-tabs http://git.drupal.org/project/elements.git

klonos’s picture

...subscribing.

jdwfly’s picture

+1

EndEd’s picture

subscribe

infines’s picture

+1

infines’s picture

What is the status of this issue? How close is it to being committed?

aspilicious’s picture

subscribe

DamienMcKenna’s picture

Subscribe.

Jerome F’s picture

What does this module in git posted in #17 do? Is it a repository that other modules can use to implement tabs? Is that something that could be used to port panels tabs for example?

(subscribing the end ? http://drupal.org/node/34496 - http://3281d.com/2009/03/27/death-to-subscribe-comments)

bryancasler’s picture

+1 for some panels tabs up in here! ...also same question.

klonos’s picture

...the git branch is what the word says, a 'fork' of the main module code that will have changes only regarding this issue here. I guess Dave did this in order to not mix code changes here with other changes.

jonathangreen’s picture

what is wrong with the current code in GIT? Is there a reason its not in main yet?

If someone wants to let me know whats wrong I can spend some time cleaning this up. I need this for a module I am moving to Drupal 7. We used to use the Tabs module, but its been deprecated in favor of elements, so I'd like to see this make it into the next release of elements.

droplet’s picture

+1

jmones’s picture

subscribe

elly’s picture

subscribey - would really like to take a crack at using this in a panels style or porting panels tabs. +1 on #28, any new status since #14 test?

infines’s picture

Might as well just use Quick tabs with Panels now.

elly’s picture

Thanks, had never heard of quicktabs. I can't tell if it offers a panels style plugin (which would be ideal) but will check it out.

bryancasler’s picture

You can make quicktabs and then insert them into panels, like content panes

lpalgarvio’s picture

+1

paulgemini’s picture

+1

adamdicarlo’s picture

Subscribing.

infines’s picture

Status:Needs work» Closed (won't fix)

#32-#34 describes a solution to your tab needs. It doesn't appear the maintainer is interested in this.

lpalgarvio’s picture

Tabs + Panel Tabs modules also work well.

could be of interest to merge Tabs into Elements.

Dave Reid’s picture

Status:Closed (won't fix)» Needs review

WTF - who ever said I'm not interested in it? I was the one that started this issue - I'm just busy and don't have all the time in the world to work on it. Anyone can help work, patch, review, and RTBC this issue. Generally I can't devote attention to an issue until it is RTBC.

Damien Tournoud’s picture

I pointed zuuperman and Stalski (the maintainers of Field Group) to this issue by email.

jwilson3’s picture

subscribe.

Stalski’s picture

StatusFileSize
new3.83 KB
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]

Included is a first patch.
Crosslinking #1036184: Move horizontal tabs to elements module

Stalski’s picture

StatusFileSize
new3.66 KB
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]

There was still one link to field_group module in it, this really works :)

Status:Needs review» Needs work

The last submitted patch, elements_horizontal_tabs_1034690_44.patch, failed testing.

Stalski’s picture

Status:Needs work» Needs review
StatusFileSize
new3.68 KB
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]

After a quick review by Damien, I moved the library requirement to the element_info hook instead of the theme function.
Fieldgroup keeps working.

Status:Needs review» Needs work

The last submitted patch, elements_horizontal_tabs_1034690_46.patch, failed testing.

bforchhammer’s picture

No idea why the test bot fails, but I think you're patch is missing horizontal-tabs.js and horizontal-tabs.css...

Stalski’s picture

StatusFileSize
new13.71 KB
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Yeah, damnd, the whole folder library folder actually. Forgot to add :(

bforchhammer’s picture

Status:Needs review» Needs work
StatusFileSize
new0 bytes
FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: No valid tests specified. (Empty run-tests.sh --file argument.).
[ View ]

Cool, patch is looking good. I applied it and tested it with References Tabs. It's working fine apart from one issue:

In line 137, horizontal-tabs.js tries to call $.fn.drupalGetSummary(), which is defined in form.js. The system/drupal.form library is not loaded if there's no form, and I therefore get errors which prevent the tabs from being rendered (this.fieldset.drupalGetSummary() is not a function).

A simple fix is to simply load the library (patch attached). Not sure that's the best solution, as e.g. many people might not even need "tab summaries"; but then form.js is relatively small anyway...

bforchhammer’s picture

StatusFileSize
new13.72 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch elements_horizontal_tabs_1034690_51.patch. This may be a -p0 (old style) patch, which is no longer supported by the testbots.
[ View ]

Hm.

Stalski’s picture

Correct. That's one that I forget and did not test through. I added the form library within the field_group module before.
Patch is good.

Dave Reid’s picture

We should declare the form.js dependency in elements_library() instead of having to add the library just like system_library() does for vertical tabs.

bforchhammer’s picture

Status:Needs work» Needs review
StatusFileSize
new13.79 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch elements_horizontal_tabs_1034690_54.patch. This may be a -p0 (old style) patch, which is no longer supported by the testbots.
[ View ]

We should declare the form.js dependency in elements_library() instead of having to add the library just like system_library() does for vertical tabs.

Like this? ;-)

Status:Needs review» Needs work

The last submitted patch, elements_horizontal_tabs_1034690_54.patch, failed testing.

bforchhammer’s picture

Status:Needs work» Needs review
StatusFileSize
new13.83 KB
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch elements_horizontal_tabs_1034690_56.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Hm, without --no-prefix then...

giorgio79’s picture

Why a custom horizontal tab element? What is wrong with Jquery UI Tabs? There is also a patch here
#1263616: jQuery UI form elements? for this module

PS: I found the reasons here #1056562: Deprecate Tabs module for D7 in favor of Elements...

Stalski’s picture

@giorgio79 The horizontal tabs described here are a copy of the vertical tabs element in core. It is currently defined within field_group.
We cannot suddenly give people something totally different, introduce new bugs as lot of code would be rewritten in field_group. The module has now over 10000 users and I can't just suprise every user when upgrading. It can be inbedded in sites as it is and so on ...

You could certainly go further with the other elements that are related in usability. The future will tell us which way to go and probably that will be the way drupal8 tabs will end up using. There is absolutely nothing wrong with jquery ui tabs but that's another approach than the consistent vertical/horizontal issue.

For now, we start with this and go from there.

jsacksick’s picture

suscribing

Stalski’s picture

Can someone test the patch in #56 ?

bforchhammer’s picture

Status:Needs work» Needs review

I can confirm that it works fine with References Tabs. That is, the following works: create a form element of #type horizontal_tabs, add fieldsets as children and on each fieldset set #group to the id of the horizontal_tabs element. This produces horizontal tabs. (As far as I can tell this works essentially the same as vertical_tabs in core).

jsacksick’s picture

I can also confirm that it works fine, tested and used with a "port" of panels tabs for d7 => http://drupal.org/sandbox/jsacksick/1251912

bforchhammer’s picture

Status:Needs review» Reviewed & tested by the community

I can also confirm that it works fine, tested and used with a "port" of panels tabs for d7 [...]

So... RTBC? (Sorry if I'm being rash)

Stalski’s picture

Good for me. There is a change made in horizontal tabs, so I'll resubmit a patch.
Also see #1036184: Move horizontal tabs to elements module which needs review.

bforchhammer’s picture

Any progress on the updated patch, Stalski?

Stalski’s picture

The branch 7.x-2.x in field_group does not have horizontal tabs anymore. It also works with the renderable elements module. I'll talk to Dave about this and I hope I can commit this patch.
Bumping this :)

klonos’s picture

Yeah, this module deserves a fresh dev with this included.

bforchhammer’s picture

Friendly 3-week bump :)

Dave Reid’s picture

Assigned:Unassigned» Dave Reid

Thanks everyone for the hard work on this. Slating this for review this weekend.

klonos’s picture

Hey Dave, how about that review?

dotmagic’s picture

Patch still works fine, waiting for the next dev release ;-)

dotmagic’s picture

Btw, with Google Chrome I've got a ugly orange border around & below the tabs, the following fixed it:

.horizontal-tabs ul.horizontal-tabs-list li:focus {
outline: none !important;
}

Alan D.’s picture

Ping some life back into this hopefully. The Tabs module recommends this module for this functionality and is one of the reasons that it is not being ported to Drupal 7.

nedjo’s picture

Issue summary:View changes

Create summary.

nedjo’s picture

Status:Reviewed & tested by the community» Needs review

I had a crack at capturing status in a summary for the issue. Corrections/additions would be great.

Bumping to "needs review" as current patch hasn't yet received serious review.

This sort of UI patch tends to be challenging to review as it includes significant complexity in CSS and Javascript as well as PHP. But don't feel like you need to master CSS, Js and PHP to contribute. Separate reviews of each of these three would be a good start.

jwilson3’s picture

CSS review: A nit-pick, but these are examples of overqualified specificity, and should be trimmed down to just classes, if possible.

+div.horizontal-tabs {

+div.field-group-htabs-wrapper .field-group-format-wrapper {

+.horizontal-tabs fieldset.horizontal-tabs-pane {

jwilson3’s picture

Some of the files you're adding are missing newlines at the end of the file.

jwilson3’s picture

I would agree, in principle, with the feedback in #72, but ideally, there would be a consistent "focus" behaviour for all tabs, not just horizontal ones.

kaizerking’s picture

When i am trying embed field collection item in as horizontal tam, i dont see any result, am i missing something,
I have field collection items in prfile2 , and wanted to display each of them as a horizontal tab. it is not working, can some one throw some light please?

RaF7’s picture

What's the reasoning behind fieldsets being used for horizontal tabs?

Wether or not used in forms, both render valid for W3C - but semantically this doesn't seem be correct. For example, AnySurfer (http://www.anysurfer.be/en), a Belgian quality mark for accessible websites, does not condone the use of fieldsets outside of forms.

http://stackoverflow.com/questions/314457/does-the-use-of-the-fieldset-h... is an interesting resource about this matter, and most of the opinions seem to agree.

matt_paz’s picture

Anyone have a feel for the status of this issue?

acoustika’s picture

Im not sure if my issue is related to this or field groups but I get no answer on that module...

I am using fieldgroup to make a node type tabbed, using horizontal tabs...
And have spend hours now trying to hide a field with drupals hide($content['field_name']);
Could not make it work until I tried dragging the field out of my horizontal tabs and to the top of all the other fields, and then it worked..... So I'm guessing this is related to fieldgroup module....

If I wanna hide the body i do hide($content['body']); But should the field naming scheme be different now that it is encapsulated in fieldsets?

Any thoughts on this? Im using the patch on #56

But to answer #80 it seems to be working just fine beside my theming issue...
I'm using it here to make nodes like mini pages, the black menu buttons is horizontal tabs...
It's a live site so dont register or anything :-) horizontal tabs in use

matt_paz’s picture

I'm using the patch from 56 too ... was more interested in the "needs review" status

IKN’s picture

I've removed my post about tabs for fields added to a single node as that functionality, however un-intuitive, is, indeed, in the core. Thank you!

Rob_Feature’s picture

I got this error after enabling the module with the patch from #56:

Error: Cannot redeclare form_process_horizontal_tabs() (previously declared in /sites/all/modules/contrib/field_group/field_group.module:1200) in /sites/all/modules/patched/elements/elements.module, line 259
bforchhammer’s picture

@Rob_Feature: you can avoid the error by ugprading the field_group module to the 2-x version...

leex’s picture

Sorry I don't know how to submit a patch yet but this could be added to the above patch around line 285

This helps to mimic the classes field group had for horizontal tabs.

//Add numbering classes to tabs to mimic field group functionality
var tcount = 0;
$('> li', tab_list).each( function() {
$(this).addClass('horizontal-tab-button-' + tcount);
tcount++;
});

Also, I suck at coding ^_^

DigitalFrontiersMedia’s picture

@bforchhammer, from the field_group project page:

The 7.x-2.x branch will not be supported any longer...
Note: Current changes are made in the 1 branch.

bforchhammer’s picture

@DigitalFrontier... Thanks, good to know.

sinasalek’s picture

It's seem that latest version of field_group already supports horizontal_tab

bforchhammer’s picture

It's seem that latest version of field_group already supports horizontal_tab

Correct. The point of this issue was that it would be better located within the elements module instead of the fieldgroup module, and therefore the functionality should be moved...

almc’s picture

Does the module version 7.x-1.4 contain horizontal tabs? haven't found mentioning of horizontal tabs in its code. Applied the patch 56 to it on D7.23, it said that the patch was applied partially. How can horizontal tab be added now programmatically to a form?

hass’s picture

Status:Needs review» Needs work

The last submitted patch, elements_horizontal_tabs_1034690_56.patch, failed testing.

Anonymous’s picture

Issue summary:View changes

Link to 1034690-horizontal-tabs branch.

Stomper’s picture

Will Elements-based tabbed Views work with the EVA module? I'd like to attach a tabbed view to a node.