Title: Full width bug in first tab Last modified: June 29, 2021 --- # Full width bug in first tab * Resolved [sneike](https://wordpress.org/support/users/sneike/) * (@sneike) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/) * Hi there, * I use a full width slideshow made with LayerSlider in various custom tabs. But if I place it in the first tab on the left, whenever I switch tab and go back to the first one, the slider is moved to the right. It only happens on the first tab. * I already sent to Jon the page and the credential to access my website currently under maintenance. * Any chance to fix this behaviour? Thanks for your help. Daniele Viewing 9 replies - 1 through 9 (of 9 total) * [jpowersdev](https://wordpress.org/support/users/jpowersdev/) * (@jpowersdev) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14607915) * Hi Daniele, * I see the problem. The LayerSlider is using JS to ensure that it is full-width. We need to trigger a resize event so it knows to update itself to full-width again when a tab is clicked. A quick way to do that is as follows: * ``` Array.from(document.querySelectorAll('.tabs.wc-tabs > li > a')).map( element => element.addEventListener('click', () => window.dispatchEvent(new Event('resize')))); ``` * Let me know if that works, Jon * Thread Starter [sneike](https://wordpress.org/support/users/sneike/) * (@sneike) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14610062) * Hey Jon, thank you so much for your tip, any insight about why it is happening only in the first tab? * I thought about something like this to fix it. Would you please be so kind to explain where should I try to use that code? Should I just paste it as it is in my function.php file? Or somewhere else? * Thank you, and sorry for bothering you. Daniele * [jpowersdev](https://wordpress.org/support/users/jpowersdev/) * (@jpowersdev) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611540) * Hey Daniele, * I’m sorry, I wasn’t very clear. That’s a JavaScript snippet. I believe you had used the Simple CSS & JS plugin for the previous ticket about linking to tabs. You can do the same thing with this snippet. And it’s no bother 🙂 * I’m not really sure why it’s only the first tab. That first tab is the regular WooCommerce product description tab, so it may be treated differently by your theme. * Let me know if that helps, Jon * Thread Starter [sneike](https://wordpress.org/support/users/sneike/) * (@sneike) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611646) * Yes, I’m using that plugin to enable the tab linking feature. * I tried to paste this code in the same snippet I had created already for the tab links, and also in a new JS snippet, but it doesn’t seem to work. Not sure if it’s because I’m implementing it wrong, or because of the code. * Actually I’m not using at all the default description woocommerce tab by leaving it empty, and I replaced it with a custom tab called the same. (that way I can choose the position of the description slider.) * Thanks for your help. Daniele * [jpowersdev](https://wordpress.org/support/users/jpowersdev/) * (@jpowersdev) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611685) * Hi Daniele, * I’m seeing the following snippet added to that plugin: * ``` var resizeEvent = window.document.createEvent('UIEvents'); resizeEvent.initUIEvent('resize', true, false, window, 0); window.dispatchEvent(resizeEvent); ``` * That does dispatch a resize event, but only once. The snippet I sent you adds an event listener to the tabs, so that each time you click a tab the resize event is fired. * Let me know if that helps, Jon * Thread Starter [sneike](https://wordpress.org/support/users/sneike/) * (@sneike) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611762) * Yes, I’m making various attempts, and I tried that code too. But they both don’t work. * If you check back now, you’ll see your code, but the bug is not fixed. * Thanks for checking. It’s really appreciated. Daniele * [jpowersdev](https://wordpress.org/support/users/jpowersdev/) * (@jpowersdev) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611795) * Hi [@sneike](https://wordpress.org/support/users/sneike/), * Try this instead: * ``` window.onload = () => Array.from(document.querySelectorAll('.tabs.wc-tabs > li > a')).map( element => element.addEventListener('click', () => window.dispatchEvent(new Event('resize')))); ``` * The plugin just drops it in a script tag in the element, so it’s running before the rest of the page loads. * Let me know if that works, Jon * Thread Starter [sneike](https://wordpress.org/support/users/sneike/) * (@sneike) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611836) * It’s fantastic! It seems to work now. * Thanks a lot for your support! Daniele * [jpowersdev](https://wordpress.org/support/users/jpowersdev/) * (@jpowersdev) * [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611839) * Hi [@sneike](https://wordpress.org/support/users/sneike/), * You’re very welcome! Glad it’s working. * Thanks, Jon Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Full width bug in first tab’ is closed to new replies. * ![](https://ps.w.org/yikes-inc-easy-custom-woocommerce-product-tabs/assets/icon- 256x256.png?rev=1558461) * [Custom Product Tabs for WooCommerce](https://wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/) * [Frequently Asked Questions](https://wordpress.org/plugins/yikes-inc-easy-custom-woocommerce-product-tabs/#faq) * [Support Threads](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/) * [Active Topics](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/unresolved/) * [Reviews](https://wordpress.org/support/plugin/yikes-inc-easy-custom-woocommerce-product-tabs/reviews/) * 9 replies * 2 participants * Last reply from: [jpowersdev](https://wordpress.org/support/users/jpowersdev/) * Last activity: [4 years, 11 months ago](https://wordpress.org/support/topic/full-width-bug-in-first-tab/#post-14611839) * Status: resolved