Incompatibility with Vertical Tabs

I have the same issue. Worked around it by installing module "Administration Theme" - it has an option to "Use Administration Theme for Editing" - as long as your Admin theme doesnt have this issue with Vertical Tabs (RootCandy in my case). This won't work for everyone so I hope someday the themer might fix this so that the Vertical Tabs, TinyMCE, ActiveMenus and a bunch of other critical modules will work with this theme.

As equinox explained, you may use the Administration theme for editing, but this is not really good for a cohesive look-and-feel.

The Vertical Tabs module is most likely going to be in Drupal 7 (http://drupal.org/node/323112), but I would love to use it now.

I'm seeing this issue as well attaching two images to this comment. Showing what the vertical tabs module looks like in marinelli and what it should look like based on the image in garland theme. I assume it's a css issue but from the theme or the module is the question.

While not perfect adding this should fix it.

.vertical-tabs {
  display: inline-block;
  width: 75%;
}

.vertical-tabs-pane {
  clear: none;
}

#primary .singlepage form ul.vertical-tabs-list {
  margin: -2px 0px -1px;
  width: 0em;
}

.vertical-tabs-list li {
  margin-right: -15em;
}

.vertical-tabs-list li.first {
  border-top: 1px solid #ccc;
}

Looking into this issue, after comparing the vertical tabs demo ( see demo here ) node-edit page to marinelli's node-edit page it appears that the vertical-tabs div is nested inside the <div class="standard"> element in marinelli.

In garland, where vertical tabs works the vertical tabs div is outside of the <div class="standard"> element.

Attempting to figure out what to edit in order to change this to determine if it is even the cause of the issue.

Ok vertical tabs appear to be working correctly after making some css additions to Marinelli's layout.css

Tested in firefox 3.6 and IE7

Added to layout.css

/* vertical tabs fix */
#primary .vertical-tabs ul.vertical-tabs-list {
margin-left:0px;
}
div.vertical-tabs {
  margin: 5em 0 1em 15em;
}

div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane {
border:0 none;
float:left;
margin-bottom:0 !important;
margin-left:0 !important;
margin-right:0 !important;
margin-top:-300px !important;
padding:0 1em;
}

/* end vertical tabs fix */

That very nearly did it, thank you!
In the third declaration, I changed:
padding: 0 1em;
to
padding: 2em 1em 0;
Seems to align better...

thanks again for the help.

I found -300 too high.
margin-top:-260px !important;

I combined two patches and solved the problem outright, I believe.

/* vertical tabs fix */
     #primary .vertical-tabs ul.vertical-tabs-list {
     margin-left:0px;
}
div.vertical-tabs {
     margin: 5em 0 1em 15em;
}

div.vertical-tabs .vertical-tabs-panes fieldset.vertical-tabs-pane {
     border:0 none;
     float:left;
     margin-bottom:0 !important;
     margin-left:0 !important;
     margin-right:0 !important;
     margin-top:-95% !important; /* here is the final fix */
     padding:0 1em;
}

/* end vertical tabs fix */
/* Second vertical tabs fix */
content ul.vertical-tabs-list {
     margin:-1px -100% -1px 0;
}

/* end Second vertical tabs fix */

Note that the margin-top is set to minus 95%. This takes into account the fact that different pages and browsers will end up with a different value for the vertical height of the tabs-pains field. Moving it up the current vertical dimension rather than a fixed number will work in all cases -- particularly if you are evolving the content type def and adding options.

I had to reduce it to -95% for one pane that had some text at the top. You can tweak this value slightly to bring the tallest pane down a little into the editing area. Otherwise, everything will line up comfortably, if not perfectly.

Unfortunately, the fix above worked in one instance of the DOM as loaded.

I have since discovered that it, too, varies from page to page as to where the pane information is place.

Please use the Status dropdown to indicate the current state of solutions in the issue.

subscribe

subscribe

Keep in mind that you may want to hide vertical tabs where the number of tabified fieldsets is small.

Case in point.... we have a particular role that sees only one fieldset in a particular node edit form, i.e. Vocabularies. There were 6 Vocabularies associated with the content type and they overlapped with the Body field.

In admin/settings/vertical-tabs we set the Minimum number of tabified fieldsets to show vertical tabs: to a value of 3. This solved the problem.

This issue is being closed because it is against a branch for a version of Drupal that is no longer supported.
If you feel that this issue is still valid, feel free to re-open and update it (and any possible patch) to work with the 7.x-4.x branch.
Thank you.