Menu icon Foundation
Equalizer - Position Image/Button to Bottom?

I am using Equalizer to create nice even columns. Each column has a image inside of it and I would like the image to be positioned or stick to the bottom of the column.

Is there an option or a way to do this when using Equalizer?

Equalizer

I am using Equalizer to create nice even columns. Each column has a image inside of it and I would like the image to be positioned or stick to the bottom of the column.

Is there an option or a way to do this when using Equalizer?

Prathap over 5 years ago

Yes, it is possible with css positions.

Wing-Hou Chan over 5 years ago

Hey Lynda!

I believe it is not possible to do this with CSS alone.

However with CSS and JS it is possible! Here is a Pen I made: http://codepen.io/winghouchan/pen/dGujk

Just copy the CSS from the CSS panel to your own CSS file and copy the JS and place it before $(document).foundation();.

I have tried to make the JS as interchangeable as possible however if you aren't familiar with JS and have trouble implementing it let me know.

Lynda Spangler over 5 years ago

Thank you both for the help. I was able to make it happen using position:absolute. It would be nice to see this ability built in to Equalizer.

Wing-Hou Chan over 5 years ago

Hey Lynda!

No problem!

I'm interested to know how it was possible without the JS. Using just position: absolute would result in the image covering other content as it is removed from the document flow so it's height won't contribute to the height of div[data-equalizer-watch].

Lynda Spangler over 5 years ago

I used position: absolute; left: 0; bottom:0; and that worked in my case.

Wing-Hou Chan over 5 years ago

Oh okay! That's good to hear!

I noticed you would like to see this built-in to Equalizer. Post a new thread with details of what you want and tag it as "feature request". We'll see if there is an interest.

Alternatively you could also post in GitHub, where there are probably more people likely to respond: https://github.com/zurb/foundation/issues?labels=feature&page=1&state=open

Lynda Spangler over 5 years ago

I opened a Github Issue here: https://github.com/zurb/foundation/issues/4628