Too many Local Tasks (Tabs) messing up page layout

As far as I can tell, this is an issue that has to be resolved in the 'Slash' theme. You also could go the string overrides route (although I believe that you should be able to just do it via the Locale module), as Panels does wrap its menu items in t(). However, because Panels correctly implements the standard drupal method for adding local tasks, there's no fix to be done on our end. Dealing with large numbers of local tasks is, unfortunately, one of those things that theme developers do often forget to take into account.

Unfortunately, Minelli is one of those themes that screws this up.

I think we need to switch away from the tabs, somehow. Besides, the magic I do with tabs won't work in Drupal 6 anyway, so may as well find a new solution now.

I'm adding the following css code to my theme styles.css to make the tabs wrap. It's not perfect, you end up with a couple of pixels of underline either side of your tab row, and I haven't tested in IE (though I think it should work).

/* Overrides for tabs from system.css to make them wrap */

ul.primary {
  border-bottom: none;
  overflow: auto;
}

ul.primary li {
  margin-top: 1px;
  margin-bottom: 2px;
  display: block;
  float: left;
  border-bottom: 1px solid #bbb;
}

ul.primary li a{
  margin-right: 0.25em;
  margin-left: 0.25em;
  border-top: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
}

Had a quick look at it again this morning, and you can get rid of the annoying spare underlines using the code below. Not tested in IE again, but I think it should still work. On resizing the text you can lose the left border of the leftmost tabs, due to em rounding errors I think. Might be able to get around this by using pixels instead of ems but then the tabs are too tightly spaced when text is large.

/* Overrides for tabs to make them wrap */

ul.primary {
  border-bottom: none;
  overflow: hidden;
  position: relative;
  left: 1em;
}

ul.primary li {
  position: relative;
  left: -1.5em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  float: left;
  border-bottom: 1px solid #bbb;
}

ul.primary li a{
  margin-left: 0.5em;
  margin-right: 0;
  border-bottom: 1px solid #bbb;
}

Could a pull down be used instead, and still behave sensibly?

You should be able to use either css or javascript to make a drop down menu for the tabs. The only thing is you would probably have to add some content for the unactivated state. You could make the ul a block element and give it a specific width and height and a background image saying 'panels admin' as a hardcoded gif.

Or you could use css to stack each of the tabs underneath each other, and have them display when you hover over them.

You would have to test in different browsers for that, I think IE may be a bit fussy about which elements can use the :hover state, it might just be the actual a links that it works with. a:hover would work, but ul:hover might not.

subscribing

I've resolved with a small js code (for me it's enough because I had this problem only in admin area)

if($("ul.tabs.primary li").size() > 4)
$("ul.tabs.primary").css("whiteSpace","normal");

this will break in two rows the tabs

or this, that will resize the text sizes

if($("ul.tabs.primary li").size() > 4)
$("ul.tabs.primary").css("fontSize","80%");

bye Lu

The CSS works and looks great in the pixture theme.

Just something it took me several hours to figure out (I have been working with Drupal for only a couple of months now), when you edit the colors of the pixture theme, it makes a working copy of all the images and the style.css file and stashes them in sites/mysite/files/color/edited_theme_name/.

So in debian I had to edit /usr/share/drupal6/sites/www.mydomain.com/files/color/pixture-f3d0bbd5/style.css to get the changes in place.

Also, the tabs in my theme are styled as class=tabs primary. So my CSS looks like this...

ul.tabs.primary {
  border-bottom: none;
  overflow: hidden;
  position: relative;
  left: 1em;
}

ul.tabs.primary li {
  position: relative;
  left: -1.5em;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
  float: left;
  border-bottom: 1px solid #bbb;
}

ul.tabs.primary li a{
  margin-left: 0.5em;
  margin-right: 0;
  border-bottom: 1px solid #bbb;
}

Hope this helps someone

At this point, except for panel nodes where we have little choice, we've moved away from tabs as much as we can. I don't think this is really an issue any more.