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.

Hi @moofawsaw, I was taking a look at the site and it looks like the code to redraw the tabs is set to trigger on the btn class, but your tab links have no btn class assigned.

Can you re-assign the btn class to your tab links and republish the site to see the effect?

Is all the custom code you are trying to redraw on the inactive tab on load present there on the tab?

Hi @cyberdave,

I have added back the btn class but the issue remains. The custom code works if it’s inside of the tab pane with the active class (and displays on load).