40% OFF EVERYTHING
Our 10th BIRTHDAY SALE
Buy Now

Resize geodir_content and gd-sidebar-wrapper

This topic contains 7 replies, has 2 voices, and was last updated by  David Sirius 6 years, 4 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • December 29, 2017 at 8:30 pm #410875

    David Sirius
    Expired Member
    Post count: 163

    Hi All,

    I’m currently editing the search page (i.e. page with the results from the search) of the supreme directory theme.

    Problem:
    I have adjusted the footer.php to have a footer, whichs works nicely, the only problem is that the main content only adjusts automatically for the header and not a footer (which is 2.5vh of height). Thus, the page needs to be scrolled to see the footer.

    Solution attempt:
    I have gone through the code and found that there are 2 places that determine the height of the content:
    (1) the following code is responsible for the left height (results in list or grid view): 

    <div id="geodir_content" class="" role="main" style="width: 63%; height: calc(100vh - 92px); overflow-y: scroll;">

    (2) the following code is responsible for the right height (= map): 

    <aside id="gd-sidebar-wrapper" class="sidebar geodir-sidebar-right geodir-listings-sidebar-right" role="complementary" itemscope="" itemtype="http://schema.org/WPSideBar" style="width: 30%; height: calc(100vh - 92px); overflow: hidden;">

    Now when I manually adjust the 100vh to 97.5vh (i.e. 100vh – my footer size of 2.5vh) in the code to test, it works well, both content sides adjust their height and the footer fits in nicely without any scrolling on the page.

    However, when I resize the window (testint the responsiveness) after entering the code, the 97.5vh is overwritten back to 100vh, which is because the header height (the 92px) changes depending on the browser width. So I presume its a script that runs to measure the window height and then delivers the output for the 2 styles (left & right). However, I cant find the source of the code.

    In which file would I need to amend the code to change outset 100vh to 97.5vh?

    Many thanks
    David

    December 30, 2017 at 12:17 am #410901

    Guust
    Moderator
    Post count: 29970

    Hi David, try this CSS, adjust as required:

    

    .search #geodir_content {
    height: calc(80vh - 109px) !important;
}

.search #gd-sidebar-wrapper{
    height: calc(80vh - 109px) !important;
}
    

		
	
    


    

			
				

    

	
    

		December 30, 2017 at 9:00 am

		
		#410922

		
		
		
	
    


    


    

	
    

		
		
    David Sirius
    Expired Member
    
		
		
     Post count: 163
    
	
    

	
    

		
		
    Hi Guust,
    

    Thank you! 
    

    This worked as expected (I had tested this), however, I was after the source of the height calculation because the problem with this static solution is that when you rescale the window/browser to a narrow width, the height jumps back to calculating 100vh – header px, which then overwrites this CSS code.  
    

    Would you know where to make the source edit or how to otherwise resolve this problem?
    

    Many thanks
    
David 
    

		
	
    


    

			
				

    

	
    

		December 30, 2017 at 9:12 am

		
		#410924

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    Have a look in /wp-content/themes/supreme-directory/js/supreme.js
    

		
	
    


    

			
				

    

	
    

		December 30, 2017 at 9:14 am

		
		#410925

		
		
		
	
    


    


    

	
    

		
		
    David Sirius
    Expired Member
    
		
		
     Post count: 163
    
	
    

	
    

		
		
    Will do, thanks mate!
    

		
	
    


    

			
				

    

	
    

		December 30, 2017 at 11:19 am

		
		#410937

		
		
		
	
    


    


    

	
    

		
		
    David Sirius
    Expired Member
    
		
		
     Post count: 163
    
	
    

	
    

		
		
    GOT IT!!!! Works fully dynamically now. 
    

    Relevant code in the js is:
    

    

        jQuery("#geodir_content").css({
        height: "calc(97.5vh - "+headHeight+"px)",
       // 'margin-top': headHeight+"px",
        'overflow-y': "scroll",
        '-webkit-overflow-scrolling': "touch"
    });

    jQuery("#gd-sidebar-wrapper").css({
        height: "calc(97.5vh - "+headHeight+"px)",
       // 'margin-top': headHeight+"px",
        'overflow': "hidden"
    });
    

		
	
    


    

			
				

    

	
    

		December 30, 2017 at 11:30 am

		
		#410941

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    Well done 🙂
    
And thanks for sharing!
    

		
	
    


    

			
				

    

	
    

		December 30, 2017 at 12:10 pm

		
		#410946

		
		
		
	
    


    


    

	
    

		
		
    David Sirius
    Expired Member
    
		
		
     Post count: 163
    
	
    

	
    

		
		
    More than happy to give something back after the valuable support I have received here (especially from you!)
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 8 posts - 1 through 8 (of 8 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket