Advanced Search and Horizontal Tabs broken

Please see the following change record: https://www.drupal.org/node/2938332

Exactly same problem here.. and the change record doesn't help :(
the problem seems to be located in bootstrap_preprocess_bootstrap_panel()

Some screenshots and markup of before and after would help...

That's not what I asked for. I don't have time to poke around a site. Viewing images and reading markup is easier for maintainers who have limited time, such as me, and read issues via email on their mobile devices.

I'm going to have to step through this locally to try and reproduce since this is technically a field_group compatibility issue, but it likely won't be until this weekend.

I have a problem that is about field_group and horizontal Tabs.
When I use bootstrap 7.x-3.16, it work fine.
But I use bootstrap 7.x-3.19, it can't show the content that has horizontal Tabs.

I have the same happening on http://www.intertalent.co.za/voiceover-artist-search

I use horizontal tabs on the Content display, and none of the fields inside the tabs are showing. I am relieved to know that an old version will sort it out.

(Version 3.17 changed the CSS for the facet search, from a block label to an inline labels and strange looking dropdowns, but that was fixed in 3.19.)

Apologies - this is the error but I am using Bootstrap 7.x-3.19 and not the dev version.

I was able to fix this by following the directions in the change record as per: https://www.drupal.org/node/2938332

I just had to remove "display: inherit;" in overrides.less and recompile my style.css as directed in the change record.

Ah, yes... please make sure to read release notes and any relevant change records.

@markcarver I had seen that release note but since it is about Panel and does not say anything about Advanced Search or Horizontal Tabs, it did not seem relevant to me. So I did not try it before. Anyway, I tried it now and the Horizontal Tabs on my node edit form still display nothing, no matter how many times they were clicked on. I tried with both my sub-theme patched and with the main base theme current dev version using a CDN or not and the issue is still there for me so I am re-opening it. I don't understand why it should be "works as designed"?

For now, I am using vertical tabs displayed horizontally and it works well. But I really think we should look deeper into this to fix the horizontal tabs properly. Let me know if I can help by doing some more tests.

Thank you for your time.

I just don't have time to look into this at the moment.

If someone wants to the grunt work and track down where this "bug" may lie, then by all means create a patch against the latest dev and I will review it.

As I stated above, it's likely a (specific) field_group compatibility issue.

My test:
Bootstrap 3.19. My Sass sub-theme based on Bootstrap 3.16

/themes/sub-theme/bootstrap/assets/stylesheets/bootstrap/_component-animations.scss
file comment:
// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.

line 10
comment out opacity:0;
.fade {
/* opacity: 0; */
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
horizontal tab contents returned.
Thats as far as I have got so far...

Smh... please... stop modifying the Bootstrap Framework source files...

That isn't a bug. .fade is suppose to have an opacity of 0, which .fade.in reverses.

This is clearly just a symptom of recent changes, I'd recommend limiting code to this project's code and within the context of reported affected versions.

I'm not exactly clear on what is happening to cause content in tabs to disappear, but I tracked down which commit and issue where this starts happening.

Original Issue: https://www.drupal.org/project/bootstrap/issues/2910624
Breaking commit: https://cgit.drupalcode.org/bootstrap/commit/?id=73fdc01

Please try adding the following code to bootstrap/templates/bootstrap/bootstrap-panel.vars.php on line 48:

  // Force grouped fieldsets to not be collapsible (for vertical tabs).
  if (!empty($element['#group'])) {
    $variables['collapsible'] = FALSE;
    $variables['collapsed'] = FALSE;
  }

** Make sure to clear cache **

Readding this line to the most recent release of 7.x-3.x fixed the issue for me. I'm not going to provide a patch as the issue and commit in question should be looked at by the maintainer and he should decide whether or not to revert it.

I can confirm though that this commit is what is causing tabs content to not display. I don't have time to actually looked into the why, sorry...

Thanks for tracing this @kenianbei - I am the author of that other patch. @markcarver reverted it, and I am trying to figure out why it caused this issue so that we can fix both issues permanently.

Can anyone in this issue provide me with steps to reproduce the issue? Please use Bootstrap version 7.x-3.19 because that includes the patch that I made (which purportedly causes this issue). Then, if you can, add the lines @kenianbei described, clear cache, and confirm that the problem goes away.

Nevermind - I was able to replicate this. See #2910624: Collapsible fieldsets are disabled when group is set for updates moving forward...

It was discovered in #2910624: Collapsible fieldsets are disabled when group is set that the field_group module that it was abusing core's #group property by placing its objects instead of an expected string. This module should be setting a custom property if it needs/wants to use an object.

Furthermore, it should properly set the default #collapsible and #collapsed properties based on its configuration.

While stepping though a debugger in bootstrap_preprocess_bootstrap_panel() when rendering a field_group htab I was unable to observe the described issue with the #group property. From my observation it was not an object, but in fact a string ("group_tabbed") as expected. This seems further supported by the logic in field_group_pre_render_htab() which extracts the group object into the appropriate element properties (as an array, not an object). It's very possible that I'm missing something, as I don't have a history with this module, but I mention this as it may explain why many people were not having success with the patch from #2910624: Collapsible fieldsets are disabled when group is set, which depends on #group being an object for proper detection of field_group tabs.

The real concern seems to be stated in #2910624-19: Collapsible fieldsets are disabled when group is set (comment in #19):

It seems that the root issue is that the $element for horizontal tabs are starting with #collapsed set to TRUE, when they should be set to FALSE

And in #22 above:

Furthermore, [field_group] should properly set the default #collapsible and #collapsed properties based on its configuration.

Specifically the issue might revolve around the #collapsible property. When #collapsible is set by field_group bootstrap_preprocess_bootstrap_panel() is adding (as of 3.x-3.17) classes that are compatible with generic fieldsets but not field_group tabs. That really seems to be the root of the disappearing tab content issue.

Is the #collapsible property actually applicable to horizontal and vertical tabs? This property appears to be initially set in _field_group_get_html_classes():

    $group->collapsible = in_array($group->format_settings['formatter'], array('collapsible', 'collapsed'));
    // Open or closed horizontal or vertical tabs will be collapsible by default.
    if ($group->format_type == 'tab' || $group->format_type == 'htab') {
      $group->collapsible = TRUE;
    }
    $group->collapsed = in_array($group->format_settings['formatter'], array('collapsed', 'closed'));

Simple commenting out $group->collapsible = TRUE; also seems to fix the problem, but may very likely have other consequences. I'm happy to get into a patch, but it may help to have someone very familiar with field_group comment on the utility of the #collapsible property here.

It doens't look like 7.x-2.x is supported.