User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

{matchHeight selectors="selectors" byRow="true | false" property="CSS-Property-Name" target="null | selector" remove="true | false"/}

Different heights for elements may look bad, but this can be corrected. Setting the same height for the selected elements. Based on BRM-IO.

Parameters:

selectors: The selectors for the objects to make the same height, eg. #iitem, .item-class .. (space separated)

byRow: true | false to enable row detection, default is true,

property: is the CSS property name to set, e.g 'height' or 'min-height'. Default is 'height'.

target: is an optional element to use instead of the element with maximum height. Default is false.

remove: true | false to remove previous bindings instead of applying new ones.

How to use it:

{matchHeight selectors=".items"/}
{matchHeight selectors=".row-0 .row-1"/}
{matchHeight selectors=".jp_demo" target="#jp_reference"/}

For more inforamtions see https://github.com/liabru/jquery-match-height

Example:

Without matchHeight

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd

With matchHeight


Available for: