[Resolved] Same length sidebar

Home Forums Support Same length sidebar

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1408544
    Sue

    I have been trying to make it so that my sidebar is never longer than the main content area. Below is what I found on this support forum, but it doesn’t work. The sidebar is still longer. (I selected the Events page in the URL below because the content area is almost always shorter than the sidebar.)

    Add Elements -> Hook -> wp_footer

    <!– Requires Spacing 0.9 or GeneratePress 1.1.10 –>
    <style>
    .inside-left-sidebar,
    .inside-right-sidebar {
    background: #FFF;
    }
    </style>
    <script type=”text/javascript”>
    (function($) {

    $.fn.equalHeightColumns = function(options) {

    defaults = {
    minWidth: -1, // Won’t resize unless window is wider than this value
    maxWidth: 99999, // Won’t resize unless window is narrower than this value
    setHeightOn: ‘min-height’ // The CSS attribute on which the equal height is set. Usually height or min-height
    };

    var $this = $(this); // store the object
    options = $.extend({}, defaults, options); // merge options
    // Recalculate the distance to the top of the element to keep it centered
    var resizeHeight = function() {

    // Get window width
    var windowWidth = $(window).width();

    // Check to see if the current browser width falls within the set minWidth and maxWidth
    if (options.minWidth < windowWidth && options.maxWidth > windowWidth) {
    var height = 0;
    var highest = 0;

    // Reset heights
    $this.css(options.setHeightOn, 0);

    // Figure out the highest element
    $this.each(function() {

    height = $(this).outerHeight();

    if (height > highest) {
    highest = height;
    }

    });

    // Set that height on the element
    $this.css(options.setHeightOn, highest);

    } else {
    // Add check so this doesn’t have to happen everytime
    $this.css(options.setHeightOn, 0);
    }
    };

    // Call once to set initially
    resizeHeight();

    // Call on resize. Opera debounces their resize by default.
    $(window).resize(resizeHeight);
    // Also check if any images are present and recalculate when they load
    // there might be an optimization opportunity here
    $this.find(‘img’).load(resizeHeight);
    // If afterLoading is defined, add a load event to the selector
    if (typeof options.afterLoading !== ‘undefined’) {
    $this.find(options.afterLoading).load(resizeHeight);
    }
    // If afterTimeout is defined use it a the timeout value
    if (typeof options.afterTimeout !== ‘undefined’) {
    setTimeout(function() {
    resizeHeight();
    // check afterLoading again, to make sure that dynamically added nodes are present
    if (typeof options.afterLoading !== ‘undefined’) {
    $this.find(options.afterLoading).load(resizeHeight);
    }
    }, options.afterTimeout);
    }

    };
    jQuery(window).load(function($) {
    var columns = jQuery(“.site-main, .inside-left-sidebar, .inside-right-sidebar”);
    jQuery(columns).equalHeightColumns({
    minWidth: 960,
    afterLoading: ‘iframe, .facebook’,
    afterTimeout: 800
    });
    });

    })(jQuery);
    </script>

    #1409094
    David
    Staff
    Customer Support

    Hi there,

    do you want the ‘white’ background to fill the space of the main container?

    If so try this CSS:

    @media (min-width: 769px) {
        .site-content {
            display: flex;
        }
        .site-main, .site-main article, .site-main .inside-article {
            height: calc( 100% - 18px);
        }
    }
    #1409855
    Sue

    That was a big improvement, but now, for some reason, the white content area extends into the footer.

    #1410104
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try removing the javascript you’ve added.

    #1410120
    Sue

    Not sure if this is what you were referring to, but I think this did the trick: I changed -18 px to -25px.

    .site-main, .site-main article, .site-main .inside-article {
    height: calc( 100% – 25px);
    }
    }

    Thank you!!

    Edited to add: I removed the code below from the hook, and then changed the height calc to 16.75 and that also worked.
    jQuery(window).load(function($) {
    var columns = jQuery(“.site-main, .inside-left-sidebar, .inside-right-sidebar”);
    jQuery(columns).equalHeightColumns({
    minWidth: 960,
    afterLoading: ‘iframe, .facebook’,
    afterTimeout: 800
    });
    });

    })(jQuery);

    #1410132
    Tom
    Lead Developer
    Lead Developer

    You shouldn’t need any javascript with the solution David provided.

    Glad you got it working 🙂

    #1410142
    Sue

    Thanks! Marking as resolved.

    #1411421
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.