variation select table too wide in category pages – product grid / product-style

Hello there!

Please see our problem, by clicking on “Kosarba teszem” (add to cart) button and see whether the dropdown select panel is too wide for you as well. My question comes from this >>> how the best to adjust this table element to rather have – lets say – 90% width of it’s container (which has dynamic width depending on how many products are chosen to show in a row in the grid).

I tried to modify the css of the table but not working. So i learnt that maybe should give the css as inline attribute to the table element to make it work. That’s maybe better if done by you, plugin developers.

What’s your suggestion/solution on this problem? I guess it’s a default problem, not by our custom modifications (as i switched off the child theme’s css as well but no improvement)

Cheers,
Viktor

Attachments:

You must be logged in to view attached files.

Hello,

Please deactivate all the plugins not related to the theme, switch the parent theme, and check the issue, If the problem has gone, activate the plugins one by one, checking the issue to detect which one causes the problem.

if the problem remains, even after the plugins are deactivated, please, provide your site admin access to the private area.

Please confirm the permit for us to deactivate the plugins not related to the theme and switch to the parent theme for the while of checking what may take up to 15 minutes. Please make the full backup of your site.

Best Regards

Hello,

I tried with parent theme, no plugins. >>> Same result (screenshot).
I found, that this problems occurs only if the text (label element) is too long for the given attribute.
Is it supposed to be correctly positioned? i was not able to check it on the Woodmart demo site, as i didn’t find product with text based attributes. Maybe should be handled with some word-brake css.(?)

I link our developer / sandpool site, feel free to check around and adjust whatever needs.

Thanks,
Viktor

Attachments:

You must be logged in to view attached files.

Hi again,

After further research i figured that adding 1 line to the css may fix this problem. Pls see the screenshot (and/or show to devs).

adding:
white-space: normal;

to the table element label (see screenshot) in this case may fix it in most browsers (including Chrome)..

Maybe worth to implement in the next Woodmart release (or an ever better solution if you find that)?

Sincerely,
Viktor

Attachments:

You must be logged in to view attached files.

Hello,

We are glad you have solved the issue. Thank you for sharing the workaround.

Usually attributes and attribute items are quite short and such a problem has never occurred, so we would hardly add this fix for all, however, if we meet such a case we would know what to suggest.

Thank you.

Best Regards

[Author]

Posts