Responsive Equal Height Plugin In Pure JavaScript – Responsive AutoHeight

Category: Javascript , Layout | September 20, 2018
Author: appleple
Views Total: 771
Official Page: Go to website
Last Update: September 20, 2018
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');

You Might Be Interested In:


Leave a Reply