An Angular directive that keeps specified child elements at the same height
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
etc/js-tests
src
test/unit
.editorconfig
.gitignore
.npmignore
.travis.yml
Gruntfile.js
README.md
karma.conf.js
package.json

README.md

Same height directive

An Angular directive that keeps elements at the same height.

(This directive does not work in IE <= 8.)

Build Status

How to install

npm install angular-same-height --save

How to use

Format:

same-height="MEDIA QUERY { SELECTOR } [, MEDIA QUERY { SELECTOR } ]"

If MEDIA QUERY is *, the elements found by SELECTOR are always kept at the same height.

Examples:

<article same-height="(min-width: 901px) { h2 } screen and (min-width: 901px) { div p:nth-of-type(1) }">
	<div>
		<h1>Title 1</h1>
		<p>Paragraph 1</p>
	</div>

	<div>
		<h1>Title 2 <br /> Title 2</h1>
		<p>Paragraph 2 <br /> Paragraph 2</p>
		<p>Paragraph 3 (not kept the same height)</p>
	</div>
</article>

<ul same-height="* { li }">
	<li>Text</li>
	<li>Text<br />Text</li>
	<li>Text<br />Text<br />Text</li>
</ul>

Running the tests

npm test