Set Equal Heights Based on Tallest [Snippet] <> No-Code Supply Co.
Code
Snippet
/ 

Set Equal Heights Based on Tallest

View 
 
Snippet
*
 ↗
View 
Snippet
 ↗
Set Equal Heights Based on Tallest
// Add the attribute of data-match-height="groupName" to all elements you want to match height
var matchHeight = function () {
function init() {
eventListeners();
matchHeight();
}
function eventListeners(){
$(window).on('resize', function() {
matchHeight();
});
}
function matchHeight(){
var groupName = $('[data-match-height]');
var groupHeights = [];
groupName.css('min-height', 'auto');
groupName.each(function() {
groupHeights.push($(this).outerHeight());
});
var maxHeight = Math.max.apply(null, groupHeights);
groupName.css('min-height', maxHeight);
};
return {
init: init
};
} ();
$(function() {
matchHeight.init();
});
view raw equal-heights-tallest.js hosted with ❤ by GitHub

Force the height of separate elements to be the same based on whichever of them is the tallest. This is helpful for a tabs component with varying heights of content in each tab, which causes the page to jump when changing tabs. Learn more here: https://codepen.io/Lewitje/pen/YybQEP

Tags

Javascript
Aesthetic
Set

Creators

Corey Moen

Share this item

Twitter
Facebook
LinkedIn

Related items

Load more

Have feedback or a question related to this item? Drop us some feedback!

Curated: 
1.11.21

Similar items

Items
53
Layout
Grid View
Row View
Rune
Inspo
Website
/ 

Rune

8.1.24
Sustainability, Energy, Technology, Marketing, Webflow, Benten Woodring, Devin Fountain
Blok
Inspo
Website
/ 

Blok

8.1.24
Technology, Social Media, Landing, Framer, Benten Woodring
Sophia Amoruso
Inspo
Website
/ 

Sophia Amoruso

8.1.24
Writing, Creative, Financial, Personal, Portfolio, Webflow
Unset Studio
Inspo
Website
/ 

Unset Studio

8.1.24
Creative, Agency, Portfolio, Webflow
Fetch
Inspo
Website
/ 
Utility

Fetch

7.31.24
No-code, API, Extending, Framer
Featured
Preview
↗

Osmo

Start building websites people remember.
View item
tinyPod
Inspo
Website
/ 

tinyPod

7.31.24
Technology, Landing, Scrollytelling, Framer
Ultimate Notion Icons
Tools
Icons
/ 

Ultimate Notion Icons

$49
7.31.24
Creative, Assets, Notion
Faith of a Mustard Seed
Inspo
Website
/ 

Faith of a Mustard Seed

7.30.24
Music, Landing, Scrollytelling, Webflow, Ilja van Eck
Runway AI: Ambient Intelligence
Inspo
Website
/ 

Runway AI: Ambient Intelligence

7.30.24
AI, Financial, SAAS, Landing, Scrollytelling, Webflow
Retronova
Inspo
Website
/ 

Retronova

7.30.24
Fashion, Creative, Landing, Scrollytelling, Webflow
Renewed Vision
Inspo
Website
/ 

Renewed Vision

7.30.24
Creative, Film, SAAS, Marketing, Webflow
Public Work
Tools
Directory
/ 

Public Work

7.30.24
Creative, Assets, Gallery
Lobato
Inspo
Website
/ 

Lobato

7.27.24
Creative, Agency, Portfolio, Webflow, Aida Olivia
OVERLAY
Inspo
Website
/ 

OVERLAY

7.25.24
Fashion, Landing, Scrollytelling, Readymag
Stewart & Partners
Inspo
Website
/ 

Stewart & Partners

7.25.24
Architecture, Agency, Portfolio, Webflow, Malvah Studio
Jamm
Inspo
Website
/ 

Jamm

7.25.24
Creative, Agency, Portfolio, Landing, Webflow
Botanic Expo
Inspo
Website
/ 

Botanic Expo

7.25.24
Agriculture, Technology, Landing, Scrollytelling, Webflow
SUPER GIANT
Inspo
Website
/ 

SUPER GIANT

7.25.24
Creative, Agency, Portfolio, Webflow
Defijn
Inspo
Website
/ 

Defijn

7.25.24
Creative, Agency, Portfolio, Webflow
Isle of Skye Whisky
Inspo
Website
/ 

Isle of Skye Whisky

7.25.24
Food & Beverage, Marketing, Webflow, Joseph Berry
Chrono
Inspo
Website
/ 

Chrono

7.23.24
Fashion, Landing, Interactions, Webflow
mmm
Tools
App
/ 

mmm

7.23.24
No-code, Website Builder
Jordan Gilroy
Inspo
Website
/ 

Jordan Gilroy

7.23.24
Creative, Personal, Portfolio, Webflow
Templace
Inspo
Website
/ 
App

Templace

7.22.24
Creative, No-code, SAAS, Gallery, Webflow, Framer, JP Silva
Brandfetch
Tools
Directory
/ 

Brandfetch

7.22.24
Creative, Assets, Brand Guide, Gallery
Load more

Bummer, no results

Try a different search/filter combo, or drop us some feedback if there is something missing you would love to see!

Reset filters

Subscribe for updates

Get updates on the latest curated resources and be the first to hear of new features.