How to fix broken layout of Listings and Reviews modules

From Documentation

JReviews Listings Module and Reviews Module use jQuery Tools Scrollable plugin for module pagination and slideshow functionality.

For this functionality to work, the modules must have a fixed width. Instead of adding a "Module Width" setting to module parameters, the width is calculated using jQuery which takes the available width of the module container and applies it to the module slider.

But in some cases jQuery isn't able to calculate the available width and then the module layout is broken. This happens if you place the module inside table cells or inside hidden tabs.

To fix the issue, you need to set a fixed width manually via css. You can add the code into custom_styles_module.css file in your JReviews theme:

• /components/com_jreviews/jreviews/views/themes/{theme_name}/theme_css/custom_styles_modules.css

Here is an example:

#jr_modSlider54 {
  width: 450px !important;
}

The number 54 in #jr_modSlider54 is the ID of the module for which you want to set the width. You can check the ID in Joomla Module Manager or check the page in your browser.