Hide column to avoid width issues

From Joomla! Documentation

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Most templates have two columns in addition to the main pane where the component output is displayed, usually a left and a right column. Many times, modules are assigned to all menu items, which means they will appear on most if not all pages.

Some of these pages may however have component output which needs more width than the main content pane provides, and this is especially true with fixed-width templates. As a result the component output may spill over the normal width of the main content pane. Dependent on the template this could lead to the content pane or a column being pushed down, or to the content pane disappearing under a column.

Some examples of when this commonly happens is when editing an article in the front-end, or on forum pages.

To solve this it is often enough to have one column less on those pages where the issue occurs. To do so by adjusting the menu assignment of the modules in that column is cumbersome and, if there is no relative menu item, impractical.


A work-around is to make the display of the right column conditional by making a few changes in the template.

At the top of the index.php file of the template, just after defined( '_JEXEC' ) or die( 'Restricted access' );, insert the following:

$option = JRequest::getVar('option', null);
$view = JRequest::getVar('view', null);
$task = JRequest::getVar('task', null);
$layout = JRequest::getVar('layout', null);

These variables can be used to recognise components and their various tasks, views and layouts.

Then, if the template has some code to adjust the width of columns depending on whether any modules are shown in that column, you will have to amend that code to exclude the component output in issue. The following is an example:

if(($this->countModules('left and right')==0)&&($option!='com_fireboard' && $option!=
'com_artforms' && !($view=='article' && $task=='edit') && !($option=='com_content' && 
$view=='article' && $layout=='form'))) $contentwidth="wide"; 
if($this->countModules('left')) $contentwidth="oneside";
if(($this->countModules('right'))&&($option!='com_fireboard' && $option!='com_artforms' 
&& !($view=='article' && $task=='edit') && !($option=='com_content' && $view=='article' 
&& $layout=='form'))) $contentwidth="oneside";
if(($this->countModules('left and right') == 1)&&($option!='com_fireboard' && $option!=
'com_artforms' && !($view=='article' && $task=='edit') && !($option=='com_content' 
&& $view=='article' && $layout=='form'))) $contentwidth="";

Finally, where you find the column that you want to hide you change the code to something like the following:

<?php if( ($this->countModules('right') ) && ($option!='com_fireboard' && $option!=
'com_artforms' && !($view=='article' && $task=='edit') && !($option=='com_content' 
&& $view=='article' && $layout=='form'))) : ?>
<div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div></div>
<?php endif; ?>

As a result, the right column will not show if, in this example, the active component is either FireBoard or ArtForms or if an article is being edited.

This example can be adjusted to any other situation by looking at the URL of the page, and finding the parts that specify the option, task, view and/or layout. So, some of the URLS that the example is based on are the following:

/index.php?Itemid=62&option=com_fireboard
/index.php?task=edit&Itemid=71&option=com_content&id=56%3Amyarticletitle&view=article