Product description tab not knowing its true size

[hyperdrive_boom]

Good afternoon,

First of all I use the latest WooCommerce and X theme Pro. The only other plugin we use is the Cue Player. More on that in a second. I will add the login details and the product url in a secure note…

So I have added the Cue Player (https://audiotheme.com/view/cue/) which for pages created in cornerstone works completely fine.

However if I add the player into a WooCommerce product description - when the page first displays it thinks it is much smaller and displays itself like it is mobile. See from the code it produces:

<div class="cue-playlist cue-theme-default no-touch cue-tracks-count-8 has-artwork max-width-480 max-width-380 max-width-300 max-width-200" itemscope="" itemtype="http://schema.org/MusicPlaylist">

But as soon as you move the screens width it updates. Why is that?? I first spoke to the Cue people and they said:

It sounds like an issue with the loading order of some scripts or styles. Cue attempts to determine the size of its parent container after the page has loaded in order to display optimally. It sounds like the product description area may get resized by a script after the page has loaded, which is causing Cue to display in responsive mode.

Cue also resizes itself when the window resizes, which is why it works when you change the size of the browser. You would likely need to manually fire a resize event after the product description area has loaded to make Cue fill the container.

Is this true? Is the description tab loading incorrectly?

Thank you,
Jason

[christian]

Hey Jason,

The description tab does not load incorrectly but generally, you should not use content that dynamically resizes inside a tab or accordion because those types of interface depends on the contents also.

I tried to increase the height and width of the WooCommerce tab but your player looks the same (see Secure Note).

It looks like your plugin requires a wide area to display differently. What is the width requirement of your plugin? How should it look?

Please note though that we do no have support for third party plugins but we’re trying to discover if the issue is with X. We also could not promise an immediate solution if that is the case.

Thanks.

[hyperdrive_boom]

Oh thank you! Did you change something in CSS? As this is now fixed!

[christian]

Hey @hyperdrive_boom,

I added CSS but removed it afterwards because it does not make any difference. The issue might have been just caching then because my screenshot was taken before I began troubleshooting.

Thanks.