Jump to content


Photo
- - - - -

How to position a widget at the bottom of a sidebar


  • Please log in to reply
13 replies to this topic

#1 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 05 April 2012 - 03:00 PM

I'd like to position a text widget at the bottom of my sidebar so that it automatically positions in line with the end of the main content of the page. I have text widgets above it at the top but the last widget I want to appear at the bottom of the sidebar. This sidebar will appear on more than one page but not on all pages. Not all pages that it needs to be on will be the same length as they will have different amounts of content in the main page content area. So I need something that adjusts automatically to the bottom of the sidebar area. I'm using Pagelines Framework 2.1.5. I've added the following to the CSS which moves the widget down but it doesn't seem to move any further down when I go from 50 to 10% - is there a better way of doing this?? #text-20 {position: relative; bottom: 10%;} Access to the site is restricted but I can allow access by IP address if you need to see it. Thanks in advance, Tracy.

#2 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 05 April 2012 - 03:15 PM

Probably there is a way to do it with hooks as well, but a PL supporter will tell you about that shortly. Have you considered absolute positioning?

Please Login or Register to see this Hidden Content

Does your site use responsive design or a fixed width? This solution may look strange on responsive design.

#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 05 April 2012 - 07:28 PM

Tracy, despite Gyoery's enthusiasm, I'm not sure it's possible to position a text widget at the bottom of the page because sidebars are inherently dynamic. They don't 'stretch' to fit. You can, however, do some other tricks to achieve the same goal. One being to apply a universal or full-width sidebar in the Morefoot or Footer area (whichever is topmost at the bottom of your page). Inside the sidebar you can include some boxes and just add empty space to several, and content (what you'd put into the text widget) in the first of these. Alternatively, you can add other options into the footer area that would accomplish the same thing. If your goal is just to add some content or message at the bottom of the page, the Callout, Highlight, Banner or Soapboxes might be of comparable value, with considerable less difficulty.

#4 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 05 April 2012 - 08:25 PM

As if!!
Posted Image
I achieved this by this exact code:

Please Login or Register to see this Hidden Content

Though you have to set a min-height for your page, to make sure the sidebars don't float on top of eachother, when your site content is less then the height of the sidebar. You'll see what I mean when u implement it.
Also, if you want to have responsive design, there need's to be alot of adjustments made since in general absolute Positioning in responsive design gets messy. If you are using static width, you should be ok.

#5 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 April 2012 - 12:36 AM

Please Login or Register to see this Hidden Content


...Will put it at the bottom of the content area. Should work perfect for what you're wanting. :)

#6 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 10 April 2012 - 10:37 AM

Thanks for your help everyone, I tried simple_mama's code and the widget disappeared totally, I replaced absolute with relative and the widget now appears towards the bottom of the sidebar, but not quite at the bottom. On other pages though (Training and Rates) it is at the bottom exactly where I want it to be. With further investigation it looks like the tertiary sidebar (where this widget sits) isn't extending right down to the bottom of the content and top of the footer area on the Endorsements page but it is on the Rates and Training pages. So the code is working on all pages and placing the widget at the bottom of the sidebar, its just that the sidebar isn't always extending as far down as you would expect on the Endorsement page. All 3 of these pages have the same sidebars visible Primary and Tertiary and the other sidebars hidden, they do have different content in the main page area though. Any ideas what could be causing this and how to fix it?? Thanks in advance, Tracy.

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 April 2012 - 10:45 AM

Hi Tracy, Can you provide access to your site please, so I can take a closer look!

#8 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 10 April 2012 - 11:14 AM

Hi Danny, Access to the site is restricted but I can allow access by IP address if you'd like to drop me a message with your IP I'll provide access for you and you can have a look. Cheers, Tracy.

#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 April 2012 - 11:27 AM

Hi Tracy, Yes PM with the IP please!

#10 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 10 April 2012 - 02:17 PM

Hi Danny, did you send me a private message with your IP?? Nothing recieved to date.

#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 10 April 2012 - 07:11 PM

I will alert Danny. He's in very early each day.

#12 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 17 April 2012 - 09:12 AM

In case anyone comes across this and is trying to do the same thing... I got round the problem by padding the top of the tertiary sidebar containing the widget I wanted at the bottom of the sidebar differently on each of the pages. This effectively pushed the widget down and extended the tertiary sidebar to the bottom of the content area. I used the following code... /* Pads top of Tertiary sidebar to push widgets to the bottom of the side bar */ .page-id-105 #sb_tertiary, .page-id-20 #sb_tertiary {padding-top: 24%;} /* Rates & Training Pages */ .page-id-22 #sb_tertiary {padding-top: 44%;} /* Endorsements Page */ .page-id-24 #sb_tertiary {padding-top: 51%;} /* Contact Page */ /* This positions the widget at the bottom of the side bar */ #text-20 { bottom: 0; position: relative;} My website was responsive by the way. Hope it helps, Tracy.

#13 Danny

Danny

    Is Awesome!

  • Moderators
  • 16342 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 17 April 2012 - 10:53 AM

Hi Tracy, Have you not tried using the Sidebar Wrap and changing its position in the options to be below instead of top and then assign a Sidebar like Secondary or Tertiary and then add the text widget to this sidebar?

#14 MissT

MissT

    Super Member

  • Members


  • 229 posts
  • LocationUK
  • Country: Country Flag

Posted 13 June 2012 - 02:28 PM

Thanks Danny, Just noticed this is still open and read your last comment - I think I did try taht without any luck - I did get it working as per my previous comment though. I will re-try the Sidebar Wrap at the bottom though next time I have to do this though as that would be a neater solution so many thanks for the info. Cheers, Tracy.