Responsive Equal Height Plugin In Pure JavaScript – Responsive AutoHeight

Category: Javascript , Layout | February 27, 2020
Author:appleple
Views Total:640 views
Official Page:Go to website
Last Update:February 27, 2020
License:

Preview:

Responsive Equal Height Plugin In Pure JavaScript – Responsive AutoHeight

Description:

Yet another equal height plugin written in pure JavaScript that automatically equalizes the height of blocks/columns in your responsive web layout.

How to use it:

Install the Responsive AutoHeight with package managers.

# Yarn
$ yarn add responsive-auto-height
# NPM
$ npm install responsive-auto-height --save

Import the Responsive AutoHeight.

import ResponsiveAutoHeight from 'responsive-auto-height';

Add the class ‘js-auto-height’ to content blocks as follows:

<div class="row">
  <div class="col-md-4">
    <div class="js-auto-height">
      Content 1
    </div>
  </div>
  <div class="col-md-4">
    <div class="js-auto-height">
      Content 2
  </div>
  ...
</div>

Initialize the library and done.

new ResponsiveAutoHeight('.js-auto-height');

Changelog:

v0.0.5 (02/27/2020)

  • feat: accept nodelist

You Might Be Interested In:


Leave a Reply