Problem/Motivation

When field_group tabs are set to horizontal in bootstrap the tab labels are hidden inside the tabs so you can't see the labels until you click and open the tabs. When you click on the tab you will see the label inside but in Bootstrap it's actually inserting vertical tabs inside fake horizontal tabs.

Steps to reproduce

  1. Install and enable field_group module
  2. Go into any content type's manage display and add a Field Group type of 'Tabs' and label it Tabs and its direction to Horizontal. (There's an Add field group button at the top of Manage Display)
  3. Then add 3 Field Groups of type 'Tab' and name them Tab 1, Tab 2 and Tab 3 then nest each tab inside of the parent 'Tabs' tab.
  4. Nest some fields in Tab 1, Tab 2 and Tab 3.
  5. Then create some content and add some values to the fields that are inside the 3 tabs and save.
  6. Test in Bartik and Bootstrap.

screenshot

screenshot

CommentFileSizeAuthor
#10 bootstrap-js_fix-3163171-10.patch690 bytesjoseph.olstad
#4 fix_horizontal_tabs-3163171-4.patch701 bytesalex_optim
Bootstrap Screen Shot.png100.57 KBthe_glitch
Bartik Screen Shot 2020-08-04 at 2.34.17 pm.png69.3 KBthe_glitch
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

the_glitch created an issue. See original summary.

the_glitch’s picture

the_glitch CreditAttribution: the_glitch commented
Title: Titles are missing in horizontal tabs on Bootstrap theme » Bootstrap converts Field Group horizontal tabs into fake horizontal tabs with no labels and puts the actual tabs inside them as vertical tabs.
sd9121’s picture

sd9121 CreditAttribution: sd9121 at QED42 commented
Assigned: Unassigned » sd9121
alex_optim’s picture

alex_optim
Location 🇺🇦 Rivne
CreditAttribution: alex_optim at GOLEMS GABB, Drupal Ukraine Community for GOLEMS GABB, Drupal Ukraine Community commented
FileSize
fix_horizontal_tabs-3163171-4.patch701 bytes

I created some patch. This patch is not a good idea, but it works for me. Maybe this help anybody create good fix for this problem.

Chris Matthews’s picture

Chris Matthews CreditAttribution: Chris Matthews as a volunteer commented
Status: Active » Needs review
markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
Version: 8.x-3.23 » 8.x-3.x-dev
Assigned: sd9121 » Unassigned
Status: Needs review » Needs work

The field_group module is... challenging in general. Since @alex_optim said their own patch is "not a good idea" (and I agree), I'll set the issue back to CNW.

joseph.olstad’s picture

joseph.olstad
Primary language French
CreditAttribution: joseph.olstad commented

***EDIT*** the said patch is not a good idea but it did pinpoint that bootstrap-panel twigs seem to be offending some js in our stack/theme/setup, still investigating.
this patch works for us.

USE CASE:
we've got the node edit/add form with field_groups enabled rendering through our bootstrap based sub-theme of a bootstrap sub-theme

WITHOUT PATCH: (javascript exception)

Uncaught TypeError: this.details.data(...).item.find(...).tab is not a function                        vertical-tabs.js:205:59
thrown from themes/contrib/bootstrap/js/misc/vertical-tabs.js

WITH PATCH:
no javascript error but it causes a plethora of other problems so do not use the patch that was uploaded above, try something else.

not sure what kind of regression we might expect from this change however in this use case the patch is working.

jamesyao’s picture

jamesyao CreditAttribution: jamesyao commented

The patch does not work to me. It introduces the regressions.

joseph.olstad’s picture

joseph.olstad
Primary language French
CreditAttribution: joseph.olstad commented

ok ya basically this is telling us that the problem is from the bootstrap-panel twig , inspect your html source when using twig debug mode (enabled) and search for bootstrap_panel but first back off the patch, I suggest removing the patch and rebuild caches first.

Perhaps by overriding the related twig we can find or change the offending markup. actually the patch could be good for debugging, compare before and after patch html markup on lowest permission role.

find ../themes/ -name *bootstrap-panel*
../themes/contrib/bootstrap/templates/bootstrap/bootstrap-panel.html.twig

something offending js here, it might be another contrib module js. To get a better idea of what js is complaining I suggest disabling js aggregation in admin / configuration / development / performance

so, it's one of js and something between that js and bootstrap/templates/bootstrap/bootstrap-panel.html.twig that is conflicting somehow, either fix the js or maybe find something about the markup if it is a legitimate markup issue or not (unsure at this moment).

joseph.olstad’s picture

joseph.olstad
Primary language French
CreditAttribution: joseph.olstad commented
FileSize
bootstrap-js_fix-3163171-10.patch690 bytes

While the js patch does not resolve the issue from the issue summary it is related to the vertical tabs js logic triggered when bootstrap panels are rendered. Maybe this should be split into a new issue but I put it here for now. The approach in the patch is using the if condition provided in this working code example below. Save the following code bits into test.html, load it with your browser, you'll see that the 'Step 2' tab is openned without error. We needed the bootstrap theme patch to js/misc/vertical-tabs.js to avoid an invalid TypeError.

<html><body>
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#step1" data-toggle="tab" >Step 1</a></li>
    <li><a href="#step2" data-toggle="tab" >Step 2</a></li>
</ul>

<div class="tab-content" id="tabs">
    <div id="step1" class="tab-pane fade in active">
    </div>
    <div id="step2" class="tab-pane fade">
    </div>
</div>
<!-- Minified js for jquery required by bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Minified css for bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Compiled and minified JavaScript for bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


<!-- Custom js that demonstrates the patch approach will work as expected (step 2 will open even with validation condition) -->
<script text="JavaScript">
  console.log('Initialize tab step 2');
  // Bootstrap and jquery are ready now.
  if (typeof $('a[href="#step2"]').tab !== 'undefined') {
    $('a[href="#step2"]').tab('show');
  };
  
</script>

</body></html>