I have been following an old thread about adding a “Fixed to Bottom” stack to equal height columns.
I am looking for one which will centre a button in each of the Filter Items of the Filter Stack.
This is the look I am after -
I have tried BWD’s Sections Fix Pro stack but as Andrew Tavernor says “with themes that limit the width of the content [such as FilterStack] many of the full width behaviour [which is required for centering] won’t look so good.”
Sections Fix pro works well when aligned left or right, but I would love to find a “Fixed to Bottom” stack which looks OK when it is centred.
Has anyone been able to do this with Filter Stack?
Appreciate the feedback, but right now I’m working with Yabdab’s Filter stack (which I’ve set to equal height grid mode) and would like to fix a stack (in my case a button) to the bottom of each grid element of Filter Stack. BWD’s Section Fix pro works but doesn’t look so good when alignment is set to centre - as Andrew Tavernor points out.
Joe Workman’s Match Height Stack mentioned by Robert-Reinink looks good so I’ll check with them to see if works with Filter Stack
SectionsFix will only align content within a SectionsPro container and will not work on the Filter stacks divs. It is nothing to do with the width or the alignment. The idea of SectionsFix is that it not only fixes its content to the bottom but also prevents the Section content form ever overlapping it.
Match height will not work either to fix buttons to the bottom. The Filter stack uses a JS library called Isotope which performs the sizing and alignment of the items. They are all absolute positioned and calculated using JS - this means that the Match Height stack and the Isotope library will be fighting against each other to set the sizing - even assuming that you get the custom selector correct.
Thanks for that Andrew. Your SectionsFix stack looks fine in the Filter Stack in RW Preview and Preview Page in Google Chrome (not yet published) when set to align left or align right. I’m just being fussy when I’m after centre align.
You must be doing something different to what I envisaged then - sorry.
To explain the centre vs left/right:
The centre setting is actually labelled “Full Width” if I remember correctly. This simply stretches itself to 100% the width of its parent container.
The purpose of this is usually to allow the use of centred text etc dropped into the Sections Fix drop zone.
What have you got inside it to make your button? I’m sure we can sort out that final piece of the puzzle if you could show me what you mean via a url.
Thanks Andrew
the URL http://www.thegourmetmerchant.com/search/ - very much still in the design stage
I think the problem is to do with using button stacks such as Buttonmaker and Foundry’s Button.
I’m happy enough with the effect in the first Filter Item in the Filter Stack on the page - inside your Sections Fix Pro Stack is JW’s Letterpress stack with a link. Giving Letterpress a border threw the whole thing out.
I can probably play around with margins to get it even more centred.
It may be something to do with the gutters and padding settings for Filter Stack.
You will see on the rest of the page why I am interested in fixing a stack to the bottom of each of the Filter Items of the Filter Stack.
The same effect would be useful for any equal height column or grid stack.
Sorry, I’ve only just seen this as I didn’t get any notifications. There are several reasons why your layout is not working using Sections FIx.
Firstly, SectionsFix works when it is placed inside a SectionsPro stack to (a) fix content to the bottom and (b) ensure that the other content does not collide with or overlap the bottom fixed content - this is the unique aspect of the stack. On your page, it is just placed within the Filter Item stack which will not work as designed. This is causing both vertical and horizontal alignment issues.
Secondly, it may be possible for this layout to work if you put a SectionsPro inside the Filter Item stacks with all your content plus the SectionsFix inside. You would however then face the problem of making the Sections follow the height of the Filter Items. This brings us back to my original answer above explaining about the Isotope library that Filter uses. This uses Javascript to work out the sizes and positions of the items in its grid. You can see it doing its work as you resize a browser where there is a delay followed by an animated movement.
The problem comes when you try to mix other external stacks with a library such as Isotope. We have no control or way of knowing when the size calculation has completed. If something inside a filter item needs to calculate its size and position then there it would need to happen after the isotope calculations have completed. Exactly the same problem would happen with Match Height (which you would need in addition to SectionsPro in order to make all the item contents the same height).
If you’re using Yabdabs filter stack (I believe there’s a couple of filter stacks available – stacks4stacks + doobox has ‘similar’) then the Equal Height will – probably – do the job.
Bundled with the Equal Height: The BottomStick Stack – but the jQuery solution (Equal Height) is probably the one that’ll work best. The Equal Height Stack allows you to release the equal height when a user defined BreakPoint is reached – you’ll probably need that with the Filter Stack when it goes 1-column.
The Equal Height Stack will align text left, but there’s an option to add custom css. The css code is: text-align: center;
Will Equal Height work reliably inside an isotope.js container though? That is why I warned the OP away from trying to use Match Height from Joe. Given that Isotope.js is resizing and absolute positioning all its content items it makes it almost impossible to do it properly and reliably without using the callbacks in the isotope library which we obviously cannot access.
If it works great but I just wanted to point out what I’ve experienced with isotope before the user spent money on who evers stack
