By dipu183 on

Hi All,

If I use a single block in left sidebar say "Navigation block" or any user created block then can it be possible to set the height of that left sidebar be same as the central content section? The central content section height will be increased according to the increase of content and will show up to footer part. I want my customized block which is showing in left sidebar be also of same height with the central content section.

How to solve that? I know extensive CSS work (style.css) is needed for that but I don't know how to do that. Can anyone please guide me how to get that?

Thanksssss

⋅ Categories: Drupal 5.x

Comments

yasir farooqui’s picture

yasir farooqui commented

Hi,

I do not know if there is any better way for this, but I usually use javascript for this sort of issues.

You can write javascript at the end of page.tpl.php file of your theme to change the height of the left sidebar to same as the height of center content section. For example you can do something like this:-

<script language = "javacript">
  var leftSideBar = document.getElementById("idOfLeftSideBar").offsetHeight;
  var centerContentSection = document.getElementById("idOfcenterContentSection").offsetHeight;

  if(leftSideBar < CenterCotentSection) {
    newHeight = leftSideBar + "px";
    document.getElementById("idOfLeftSideBar").style.height = newHeight;
  }
</script>

Obviously its possible that you are not able to use same code, specially if the left sidebar and center content section are not starting from same height, but you can use this code by making some minor changes accordingly.

Thanks

dipu183’s picture

dipu183 commented

Thanks a lot for your idea . Based on that I have solved this issue. Here is what I have done-

I have called the java script function in the body onLoad section-

And then added the function in the head as follows -

<script type="text/javascript">
<!--

function coolFN() {
var leftSideBar = document.getElementById("sidebar").offsetHeight;
var centerContentSection = document.getElementById("content").offsetHeight;

if(leftSideBar < centerContentSection) {
    newHeight = centerContentSection + "px";
}
else
{
newHeight = leftSideBar + "px";
newcenHeight = leftSideBar + "px";
}
document.getElementById("sidebar").style.height = newHeight;
document.getElementById("content").style.height = newcenHeight;

}

-->
</script>

Thanks again for your help, otherwise I couldn't solve that.

[EDIT: added code tags]

alexkessler’s picture

alexkessler commented

This little snippet is from http://stackoverflow.com/questions/35699/on-a-two-column-page-how-can-i-...
posted by Burak Erdem.

Works fine in Drupal 6... 

<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
        var maxHeight=0;

        this.each(function(){
                if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
        });

        this.each(function(){
                $(this).height(maxHeight + "px");
                if (this.offsetHeight>maxHeight) {
                        $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
                }
        });
};

// usage
$(function() {
    $('.column1, .column2, .column3').equalHeights();
});
</script>
eyalro’s picture

eyalro commented

I don't know js....the way i understand this (using the DIV IDs of the theme):

$('.column1, .column2, .column3').equalHeights(); => $(#sidebar-first, #sidebar-second, #content).equalHeights();

"px" => a number that I choose, e.g. $(this).height(maxHeight + 0);

Is this correct, it doesn't seem to work...?

Also does it matter where in the I am placing the code?

very lost...

Thanks!
Eyal

alexkessler’s picture

alexkessler commented

I have no site where i use this script at the moment, but as far as i can remember you have set the names of your divs.

e.g.:
$('.column1, .column2, .column3').equalHeights();
to:
$('.right_sidebar, .content, .left_sidebar').equalHeights();

Did you use '#' for IDs and '.' for classes?

SeanA’s picture

SeanA commented

Thank you MrKatz for posting this useful code. Here's how to use it.

1) Create a file jquery.equalHeights.js in your theme folder or a subfolder and add this code to it (don't change anything):

jQuery.fn.equalHeights = function() {
  var maxHeight = 0;

  this.each(function() {
    if (this.offsetHeight > maxHeight) {maxHeight = this.offsetHeight;}
  });

  this.each(function() {
    $(this).height(maxHeight + "px");
    if (this.offsetHeight > maxHeight) {
      $(this).height((maxHeight - (this.offsetHeight - maxHeight)) + "px");
    }
  });
};

2) Add this code to your theme's template.php file. Set 'themename' and 'pathto' according to your setup.

drupal_add_js(drupal_get_path('theme', 'themename') .'/pathto/jquery.equalHeights.js', 'theme');

3) Add this code to your theme's page.tpl.php file. Set the CSS classes or id's for the columns you want to make equal.

<script type="text/javascript">
  $(function() {
    $('.column1, .column2, .column3').equalHeights();
  });
</script>

Until CSS can accomplish this properly on its own, it's not a bad solution. See the Stackoverflow thread for other approaches.

[edit] This works well except when the height changes because of dragging textareas or expanding fieldsets. Rats! =P

[further edit] Added some js hackery to set the column heights to 'auto' when something else resizes one of them. Good enuf for now!

crutch’s picture

crutch commented

subscribe

chefarov’s picture

chefarov commented

The easy way to do that is by installing the http://drupal.org/project/equalheights
and go in the module's settings page and write
column
in "css classes" text area (or any other class that you want to give to your elements).
This way all elements of class column will have the equal height.