Issues with hiding tabs not displaying when hidden using custom.js

Conrad_Shealy

Hey Everyone,

So, we are using some dynamic tabs logic like what is shown here https://community.cireson.com/discussion/comment/11532#Comment_11532 however, this seems to have some un-intended consequences.

So, here is the issue, the tabs are loading on the page, but the page runs out of space and the tabs get put in the dropdown on the right.  



After that happens, the Custom.js comes along and does .hide() on the tabs that I don't want displayed.   Now I end up with only two tabs showing and 4 or 5 tabs in the dropdown.

Now here's where it gets interesting, if you resize the window (even just the tiniest bit), the tabs come out of the drop down and display in manner that I want them to...



I am guessing that there is something monitoring the page and when the resize happens, it re-evaluates what items appear in the dropdown/on the page.

This leads me to believe that there must be a way to "trick" the page into thinking that it has been resized or some way to tell it to refresh the content that is in the ul class="nav nav-pills" at the top... I just can't figure out how to do it.

Does anyone have any suggestions or insight into how they've dealt with this problem?

Jeff_Lang

you could try something like this to make it think it has been resized.

</code><code>window.dispatchEvent(new Event('resize'))

Jeff_Lang

you could try something like this to make it think it has been resized.

</code><code>window.dispatchEvent(new Event('resize'))

Conrad_Shealy

Jeff_Lang said:

you could try something like this to make it think it has been resized.

</code><code>window.dispatchEvent(new Event('resize'))

This seems to work perfectly, I will test and report back if there are any issues.  Thank you!

Conrad_Shealy

For others with this issue, the code that I ended on using is, this helps with compatibility for IE11:

   

if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) {

     var evt = document.createEvent('UIEvents');

     evt.initUIEvent('resize', true, false, window, 0);

     window.dispatchEvent(evt);

    } else {

       window.dispatchEvent(new Event('resize'));

    }