Why isn't JavaScript modifying element styles in Joomla 3?

Other Questions JavaScript
1

I’m having trouble with JavaScript in Joomla 3. My code works fine in a regular HTML file, but it’s not changing element styles when I put it in the template’s index.php.

Here’s a simplified version of what I’m trying to do:

function adjustHeight() {
  var sidebar = document.getElementById('sidebar');
  var content = document.getElementById('content');
  
  if (sidebar.offsetHeight < content.offsetHeight) {
    sidebar.style.height = content.offsetHeight + 'px';
  } else {
    content.style.height = sidebar.offsetHeight + 'px';
  }
}

window.onload = adjustHeight;

When I check the elements after the script runs, the style attribute is empty. But the heights are being calculated correctly.

Has anyone else run into this issue with Joomla 3? What am I missing? Any help would be great!

2

I’ve dealt with similar challenges in Joomla 3. One thing to consider is that Joomla might be using CSS flexbox or grid for layout, which can override manual height adjustments. Instead of directly modifying styles, try adding a class to trigger the height change:

function adjustHeight() {
  var sidebar = document.getElementById('sidebar');
  var content = document.getElementById('content');
  
  if (sidebar.offsetHeight < content.offsetHeight) {
    sidebar.classList.add('match-content-height');
  } else {
    content.classList.add('match-sidebar-height');
  }
}

document.addEventListener('DOMContentLoaded', adjustHeight);

Then in your CSS:

.match-content-height { height: 100%; }
.match-sidebar-height { height: 100%; }

This approach is often more reliable in CMS environments where multiple scripts and styles interact. Also, ensure your script is loaded in the right order relative to Joomla’s core scripts.

3

I’ve encountered this issue before in Joomla 3. The problem might be related to how Joomla handles JavaScript and CSS. Try wrapping your function in a jQuery ready block to ensure it runs after the DOM is fully loaded:

jQuery(document).ready(function($) {
    function adjustHeight() {
        // Your existing code here
    }
    adjustHeight();
    $(window).resize(adjustHeight);
});

Also, check if your template uses any JavaScript frameworks that might conflict with native JavaScript methods. If issues persist, consider using Joomla’s built-in JavaScript functions or a plugin specifically designed for dynamic content resizing in Joomla templates.

4

hey mate, had similar issues. check if ur script’s loading after the DOM. try moving it to the bottom of ur template or use DOMContentLoaded event. also, make sure joomla’s not overriding ur styles elsewhere. good luck!