- This topic has 7 replies, 3 voices, and was last updated 6 months, 2 weeks ago by
Tom.
-
AuthorPosts
-
August 18, 2020 at 4:25 pm #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>August 19, 2020 at 2:40 am #1409094David
StaffCustomer SupportHi 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); } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/August 19, 2020 at 9:33 am #1409855Sue
That was a big improvement, but now, for some reason, the white content area extends into the footer.
August 19, 2020 at 1:17 pm #1410104Tom
Lead DeveloperLead DeveloperHi there,
Try removing the javascript you’ve added.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 19, 2020 at 1:29 pm #1410120Sue
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);
August 19, 2020 at 1:37 pm #1410132Tom
Lead DeveloperLead DeveloperYou shouldn’t need any javascript with the solution David provided.
Glad you got it working 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentAugust 19, 2020 at 1:48 pm #1410142Sue
Thanks! Marking as resolved.
August 20, 2020 at 9:17 am #1411421Tom
Lead DeveloperLead DeveloperNo problem!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.