In this tutorial, we'll show you how this feature works. In this guide, we'll use a customer case. He wanted to set the same height for all the modules in a single module position.
Step #1. Create a custom.js file
- In your Joomla control panel, go to Extensions > Templates > Templates.
- Choose js_wright or other template such as js_abc, js_mondrian, etc.
- Click New File.
- Select the /js folder.
- Type in "custom" as file name.
- Select js as file type.
- Press the Create button
Step #2. Edit your custom.js file
At this point, you have successfully created your
custom.js file you can easily edit.
Step #3. Example of the use case
Let's see if we can now answer the customer's original request for 4 modules in a row, all of them were placed in the Grid-Top position.
The solution involved the
custom.js file with the code from this snippet (credits to the "jQuery Match height" plugin developer).
As last step, the 4 modules needed the class suffix: equal-height (empty space at the beginning).
This was the end result. The modules uses the same height, even if the screen is resized. You can use this method for modules in positions: grid-top, grid-top2, grid-extra, grid-bottom and grid-bottom2.