Streaming live at 10am (PST)

Reinitialize active tab

At the test site below you can see that the Before </body> function updateWidth(); doesn’t initialize unless the associated html is in the w--tab-active tab on load.

Take a look at the demo here: https://kyles-dynamite-project-efe535.webflow.io/

If you go into Tab 2, then look at the inputs you will see their width is 0. My code is to auto-resize the input width based on the input value and it’s subsequent width. If on load I have Tab 2 as my active tab, the code initializes and the width is resized as intended. Only when my code is not in an active tab does it not initialize. To see it re-initialize click the orange box and then the red one. That’s because in my code I have the function to run after these buttons are pressed.

After contacting Webflow they said that there needs to be a redraw of the Tab’s using the native function: webflow.require('tabs').redraw();

Does anyone know how to successfully call this function inside of custom code to get the Webflow Tabs to redraw on click/ for w--tab-active?

I tried the below without success:

$('.btn').click(function() {
      Webflow.require('tabs').redraw(); 
    });

https://preview.webflow.com/preview/kyles-dynamite-project-efe535?utm_medium=preview_link&utm_source=designer&utm_content=kyles-dynamite-project-efe535&preview=6081e75b40b43f3aa2b35f161e8ec22e&mode=preview

I haven’t dealt with this before, but your selector for (‘tab’) isn’t defined, there is a console error being thrown:

image

Might be a good place to start.

@cyberdave FYI I have continued this inquiry here.

@sam-g

I think ‘tabs’ is a general selector. I have also tried naming it to a class without success.

I’m pretty sure re-initializing the tab every time will require a more complex solution.