aihowes/equalstature

EqualStature a jQuery plugin that matches the height of elements using the tallest (natural) height

Hi

I'm Alex, a full stack developer based in Devon, UK 🇬🇧 originally from Gibraltar 🇬🇮. I thrive on the challenge of problem-solving and finding creative solutions to complex issues. As a lifelong learner, I am always looking to expand my skillset and staying up-to-date with the latest tech, business and productivity.

I currently work at Pixel Fridge, where I collaborate with a talented team of developers and designers to deliver high-quality projects that exceed client expectations and provide purposeful experiences that have a positive impact on people and the planet.

In my downtime, you can find me honing my musical skills on the guitar or drums, or unwinding with a game. I’m also making an effort to prioritize my health and fitness, and I'm starting to enjoy running and lifting weights.

Don’t hesitate to reach out to me on any of the platforms listed below. Whether you’re interested in collaborating on a project or just want to chat about our interests, I’m always open to connecting with like-minded individuals.

Email • Twitter • LinkedIn • Instagram • YouTube • Twitch • Strava • Hevy

---

GPG Key: https://github.com/aihowes.gpg

NPX Card: npx aihowes

---

See pinned projects below 👇

equalstature's Issues

outerHeight(true);

Should we use true to include margins or not, when might you need margin's to be associated to the min height.

If we're calculating based on children = include margins
If not based on children, i.e. element has no children = don't include margins

Items without children aren't calculated

As the height is calculated based on children heights a check needs to be done to see if there actually is any children.

An example of where the current code won't work is when targeting a paragraph tag, to equal height it, but the paragraph has no children.

.outerHeight(); would need to be done on the paragraph tag and then not have the padding of the parent added to it. (as this will double the padding values as .outerHeight() already applies it)

Add jQuery as Dependency in bower.json

Away from the PC now, so just a reminder to myself to add jQuery as a dependency in bower.json

Ability to use height instead of min-height

So firefox doesn't pay attention to min-height when it's set on a table, making equalstature pretty useless when using it with an element set to display table.

Suggested fix: allow the ability to choose to use height or min-height. Min height is generally preferred allowing there to be extra wiggle room if for some reason the plugin doesn't work and some content forces the element to be taller than the min-height but height can also be useful.

Calculating based on children

The plugin only checks the height of the direct children, is this even worth it? Surely if we're reseting top-height every time the plugin gets called we can just use the current elements height instead of wasting resources calculating children height.

Removing Inline Styles

There's a better way to reset the inline style that will remove the inline-style as opposed to overriding it to 0. Simply use:

$(this).css('height', '');