Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
vanilla-match-height
Advanced tools
matchHeight: makes the height of all selected elements exactly equal
Demo - Features - Install - Usage - Options - Data API
Advanced Usage - Changelog - License
See the vanilla-match-height.js demo.
In the years since this library was originally developed there have been updates to CSS that can now achieve equal heights in many situations. If you only need to support modern browsers then consider using CSS Flexbox and CSS Grid instead.
Use this library to match height of internal elements, like title or text of teasers
box-sizing
and mixed padding
, margin
, border
valuesDownload vanilla-match-height.js and include the script in your HTML file:
<script src="vanilla-match-height.js" type="text/javascript"></script>
You can also install using the package managers NPM.
npm install vanilla-match-height
modular code
import 'vanilla-match-height'
document.body.matchHeight({elements: '.item'});
const containers = document.querySelectorAll(".items-container");
containers.forEach((container) => {
container.matchHeight({elements: '.item'});
});
Where options
is an optional parameter.
See below for a description of the available options and defaults.
The above example will set all selected elements with the class item
to the height of the tallest.
If the items are on multiple rows, the items of each row will be set to the tallest of that row (see byRow
option).
Call this on the event (the plugin will automatically update on window load).
See the included test.html for many working examples.
Also see the Data API below for a simple, alternative inline usage.
The default options
are:
{
elements: '',
byRow: true,
property: 'height',
target: null,
remove: null,
attributeName: null,
events: true
}
Where:
elements
is an optional string containing one or more selectors to match against. This string must be a valid CSS selector stringbyRow
is true
or false
to enable row detectionproperty
is the CSS property name to set (e.g. 'height'
or 'min-height'
)target
is an optional element to use instead of the element with maximum heightremove
is an optional element/s to excludedattributeName
is an optional for use custom attributeevents
is an optional for enable default eventsUse the data attribute data-mh="group-name"
or data-match-height="group-name"
where group-name
is an arbitrary string to identify which elements should be considered as a group.
<div data-mh="my-group">My text</div>
<div data-mh="my-group">Some other text</div>
<div data-mh="my-other-group">Even more text</div>
<div data-mh="my-other-group">The last bit of text</div>
All elements with the same group name will be set to the same height when the page is loaded, regardless of their position in the DOM, without any extra code required.
It's possible to use custom data attribute data-same-height="group-name"
<div data-same-height="my-group">My text</div>
<div data-same-height="my-group">Some other text</div>
<div data-same-height="my-other-group">Even more text</div>
<div data-same-height="my-other-group">The last bit of text</div>
const containers = document.querySelectorAll(".data-api-items");
containers.forEach((container) => {
container.matchHeight({attributeName: 'data-same-height'});
});
Note that byRow
will be enabled when using the data API, if you don't want this (or require other options) then use the alternative method above.
There are some additional functions and properties you should know about:
window.dispatchEvent(new Event('resize'));
If you need to manually trigger an update of all currently set groups, for example if you've modified some content.
You can toggle row detection by setting the byRow
option, which defaults to true
.
It's also possible to use the row detection function at any time:
const containers = document.querySelectorAll(".target-items");
containers.forEach((container) => {
container.matchHeight({elements: '.item-0, .item-2, .item-3', target: document.getElementById("target-item-1")});
});
Will set all selected elements to the height of the first item with class sidebar
.
const containers = document.querySelectorAll(".property-items");
containers.forEach((container) => {
container.matchHeight({elements: '.item', property: 'min-height'});
});
This will set the min-height
property instead of the height
property.
Where event
a event object (DOMContentLoaded
, resize
, orientationchange
).
Manual apply, code for JavaScript framework/library (e.g. vue
, react
...).
var el = document.body.matchHeight({elements: '.item'});
...
el._apply();
el._applyDataApi('data-match-height');
el._applyDataApi('data-mh');
el._applyAll();
Reset inline style property
var el = document.body.matchHeight({elements: '.item'});
...
el._remove();
Remove events
var el = document.body.matchHeight({elements: '.item'});
...
el._unbind();
You should ensure that there are no transitions or other animations that will delay the height changes of the elements you are matching, including any transition: all
rules. Otherwise the plugin will produce unexpected results, as animations can't be accounted for.
import 'vanilla-match-height';
export default {
name: 'Example',
data: function () {
return {
matchHeight: document.body.matchHeight({elements: '.item p'})
}
},
beforeUnmount() {
this.matchHeight._unbind();
},
mounted() {
this.matchHeight._apply();
},
methods: {
reMatch() {
this.matchHeight._apply();
}
}
}
import 'vanilla-match-height';
class MyComponent extends Component {
matchHeight = document.body.matchHeight({elements: '.item p'});
componentDidMount() {
this.matchHeight._apply();
}
componentWillUnmount() {
this.matchHeight._unbind();
}
render() {
return (
...
);
}
}
I suggest to assign element to a variable for not create multiple events instances
//Right solution
var el = document.body.matchHeight({elements: '.item'});
... json update
el._apply();
//Wrong solution
document.body.matchHeight({elements: '.item'});
... json update
document.body.matchHeight({elements: '.item'})._apply();
To see what's new or changed in the latest version, see the changelog
vanilla-match-height.js is licensed under The MIT License (MIT)
Copyright (c) 2023 Simone Miterangelis
This license is also supplied with the release and source code.
As stated in the license, absolutely no warranty is provided.
1.0.5 (2023-12-11)
<a name="1.0.4"></a>
FAQs
a vanilla responsive equal heights
The npm package vanilla-match-height receives a total of 121 weekly downloads. As such, vanilla-match-height popularity was classified as not popular.
We found that vanilla-match-height demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.