0

I am using Magento 2 EE. When I press on a tab link inside a block in the home page, the next tab becomes invisible. The handler is adding this code:

aria-expanded="false" style="display: none;"

to the next tab.

This is the code for the navigation tabs:

<ul class="nav nav-tabs">
  <li class="active"><a href="#featured" data-toggle="tab">New Arrivals</a></li>
  <li><a href="#new-arrivals" data-toggle="tab">Bestsellers</a></li>
  <li><a href="#most-viewed" data-toggle="tab">Most Viewed</a></li>
</ul>

And this is the code for one tab after pressing the tab next to it:

<a href="#most-viewed" data-toggle="tab" aria-expanded="false" style="display: none;">Most Viewed</a>

I used Visual Event for java script to debug the issue. I found that the click event is calling the following function from the live bootstrap.min.js v 3.3.6:

function (c){c.preventDefault(),b.call(a(this),"show")}

The are no errors in the console.

Any help to solve the issue?

  • search any code related to #featured #new-arrivals. I believe js call it somewhere in code. Ctrl + U may help you find problem with debug tool – mrtuvn Jun 19 '17 at 7:41
  • 1
    Frustrating i have looked and come up with little to help. I think you've set it up correctly and bootstrap should handle the rest. All i can see if that there is some conflict that when an a element is clicked then style is then set to display none for the current active element but couldn't see anywhere in code where this is called. I can think of a botch fix based on this however. – harri Aug 30 '17 at 11:58
  • Exactly this is the problem. What do you suggest me to do ? – Moe Hammadi Aug 30 '17 at 12:01
  • You could just add something like ul.nav.nav-tabs a { display: block !important; } to css if you run out of ideas. Not ideal i know but will override the style being set and it will atleast work. – harri Aug 30 '17 at 12:04
  • 1
    Sounds like a conflict with jQuery tabs, I've updated my answer. – Ben Crook Aug 30 '17 at 16:08
1
+50

I often use chrome dev tools to help debugging in this situation. You can search by class in the dom by just clicking CTRL + F in the elements tab. This will show any code on page however i couldn't find anything related to those classes on this page itself.

You can also see what scripts are run when you perform an action like click by clicking memory tab click start for Record Allocation Profile and then click your tab and then click stop. This will show the functions and the files which were used during that action. This did not help me in this case however as everything seemed bootstrap and jquery related and nothing stood out as being out of the ordinary. There may be a better way of doing this as you seem to have tried something similar.

You can also search all external scripts by clicking 3 dots in top right of chrome dev tools and selecting search all files. I searched for any files with the classes nav-tabs ect however nothing in js came up just css but thought this may help you debug.

While taking a look i noticed is this only happens to the a elements. I changed them to div's and all worked and they weren't being hidden so not sure if this will help you narrow down what is causing this.

This is all being handled by bootstrap however as setting the class and data-toggle="tab" should be enough to make this work within markup alone and no additional JS should of been needed to make this work but there must be a conflict somewhere that causes this.

Other than that here is my workaround if you can't find the issue.

Add below to CSS to override the style that is being set:

ul.nav.nav-tabs a { display: block !important; }
| improve this answer | |
  • This is an easy and quick workaround for the meantime. I will go with this solution – Moe Hammadi Aug 31 '17 at 8:43
  • Thanks, i would maybe suggest adding a further class to css and tabs markup as to possibly avoid more conflicts however. I think Ben's solution would probably put you more along the lines of the source of the problem. – harri Aug 31 '17 at 19:25
1

I suspect this is a conflict between Bootstrap tabs and jQuery tabs (already part of M2), if you search your whole project for data-toggle="tab" you will see this file:

vendor/magento/magento2-base/lib/web/jquery/jquery.tabs.js

Here you can see the JS used for both Bootstrap and jQuery tabs:

enter image description here

There is a discussion (quite outdated but still sounds like an issue) here about the conflict, Bootstrap don't look willing to fix it.

Possible resolution

I can only see the jQuery tabs being called in this file:

vendor/magento/theme-adminhtml-backend/web/js/theme.js:509

If you was to overwrite this file in your theme and remove all references to the tabs you may be able to resolve the conflict. Just beware doing so will break any jQuery tabs on your site, and I suspect some M2 widgets such as accordion, tabs, and collapsible will break. So be prepared to fix or remove them.

It would probably be quicker to use the M2 tabs, or create your own.

| improve this answer | |
  • What on the markup makes you think it's tabs, collapsible or accordion? I was thinking it looked pure bootstrap? – harri Aug 30 '17 at 14:48
  • The use of [data-toggle="tab"] and aria-expanded="false", although you're right that Bootstrap uses the same attributes to. If it is Bootstrap then the Magento stack exchange isn't really the best place to get an answer as it isn't Magento related. – Ben Crook Aug 30 '17 at 15:16
  • Yeah true i think it is bootstrap however the use of nav-tabs as the class what did it for me. Does anything Magento use style="display:none" to hide anything however? – harri Aug 30 '17 at 15:25
  • Yeah a lot of things use display: none; so that doesn't really help narrow it down, agreed it does look like Bootstrap with that. @moe-hammadi Can you share the code that initialises the Bootstrap tabs please? – Ben Crook Aug 30 '17 at 15:27
  • 1
    Yeah there would be quite a bit of effort to fully fix this. – Ben Crook Aug 31 '17 at 9:30
0

Try using CSS only so there are no conflicts.

<style>* {
        box-sizing: border-box;
      }

      body {
        padding: 10px;
        background: #f2f2f2;
        text-align: center;
      } .tabs {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  background: #efefef;
  box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
} .input {
  position: absolute;
  opacity: 0;
} .label {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}

.label:hover {
  background: #d8d8d8;
}

.label:active {
  background: #ccc;
}

.input:focus + .label {
  box-shadow: inset 0px 0px 0px 3px #2aa1c0;
  z-index: 1;
}

.input:checked + .label {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .label {
    width: auto;
  }
} .panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}

@media (min-width: 600px) {
  .panel {
    order: 99;
  }
}

.input:checked + .label + .panel {
  display: block;
}</style>
    <div class="tabs">
        <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
        <label for="tab-1" class="label">New Arrivals</label>


    <div 

class="panel">
          <p><img src="http://via.placeholder.com/640x360" style="max-width: 40%;"></p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti consequuntur eveniet aut expedita enim rem esse repudiandae, quis dignissimos, et, culpa in necessitatibus commodi. Neque nostrum velit aperiam voluptates nobis.</p>
        </div>

        <input name="tabs" type="radio" id="tab-2" class="input"/>
        <label for="tab-2" class="label">Best Sellers</label>
        <div class="panel">
          <p> <img src="http://via.placeholder.com/640x360" style="max-width: 40%;"> <img src="http://via.placeholder.com/640x360" style="max-width: 40%;"> </p>
          <p>Stuff and things</p>
        </div>
<input name="tabs" type="radio" id="tab-2" class="input"/>
        <label for="tab-2" class="label">Most Viewed</label>
        <div class="panel">
          <p> <img src="http://via.placeholder.com/640x360" style="max-width: 40%;"> <img src="http://via.placeholder.com/640x360" style="max-width: 40%;"> </p>
          <p>Stuff and things</p>
        </div>

      </div>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.