sixthdim/angular-vertilize

An AngularJS directive to vertically equalize a group of elements with varying heights.

NOTICE: This project has been retired as there are now better ways of accomplishing equal height elements with simpler methods. Here are some examples:

• CSS Table Cell
• CSS Flexbox Stretch
• Flex Layout for Angular 2+

AngularJS Vertilize Directive

An AngularJS directive to vertically equalize a group of elements with varying heights. In other words, it dynamically makes a group of elements the same height.

Usage

First, add angular.vertilize to your Angular application module dependencies. Then, use the vertilize-container directive and child vertilize directives on the HTML elements that you want to have equal heights maintained.

Example

<div vertilize-container>
    <div vertilize ng-repeat="tile in tiles">
        [Some varying content]
    </div>
</div>

How it works

The vertilize-container directive groups and gives scope to it's child vertilize directives. The vertilize elements DO NOT need to be the immediate children of vertilize-container and can be on any kind of element, as long as its CSS display property is set to block or inline-block. When any of the vertilize elements' height changes to become the tallest sibling, either due to a window resize, element width change, or content being added or removed, all siblings set their height to match.

Demo

Open the index.html file in your web browser or go to http://sixthdim.github.io/angular-vertilize.

Compatibility

angular-vertilize has been tested in all modern browsers, as well as IE8 and works well. Feel free to submit a pull request if you find a bug or have a better way of handling something in the module.

License

MIT

angular-vertilize's Issues

permission to use source code for internal tutorial purpose

Hi,
I have created a document for my colleagues on vertilize.js and its uses, as most of the times the trainees do not have access outside of intranet. The source is taken from github and the document is purely for internal tutorial purpose only. And there is no monetary or copyright benefit for me from this document.
PFA the document. But my company has asked to get the permission from github before they publish this document on our KM portal.
Could you please review and provide your permission to use this? If yes, I will share the document with you.

Thanks,
Smitha

Radio buttons not working inside vertilize

Giving angular-vertilize a shot on a form page and it seems to be incompatible with my radio buttons:

  <div class="formItem">
    <label>Site Coordinates:</label>
    <div class="radios">
      <input type="radio" id="coordinateFormatDecimal"
                  data-ng-value="'decimal'"
                  data-ng-model="coordinateFormat">
      <label for="coordinateFormatDecimal" class="option first">Decimal</label>
      <input type="radio" id="coordinateFormatDegrees"
                  data-ng-value="'degrees'"
                  data-ng-model="coordinateFormat">
      <label for="coordinateFormatDegrees" class="option last">Degrees</label>
    </div>
  </div>

The vertilize behavior itself is working great, making three <fieldset> elements align beautifully. These radio buttons within one of those fieldsets, though, will not display as being selected, even though the click is working and changing the underlying "coordinateFormat" value in the model.

Could vertilize somehow be interfering with the browser's ability to update the state of the radio button? Radios work fine outside of the vertilize elements -- even if still within the vertilize-container element. Text input and select boxes are working fine. I have not tested checkboxes.

angular-vertilize requires jQuery

This factoid should probably be mentioned in the documentation. Our project is jquery-free :)

This function is required:
element.outerWidth()

publish to npm

The module is currently not available through npm! Would be great to have it there too.

Async loaded resources support

Aync loaded resources support whould be nice. Reproduceable - the first load of this plnkr demo failes because the image resources are not loaded when angular-vertilize is executed. Please hand on, I fixed this allready an I will create a pull request.

Doesn't work with bootstrap grid

It gets the tallest of all elements in the .row not each line.

The page is very slow when input fields are present inside vertilize directive.

The page becomes very slow and when trying to enter input fields, the characters entered show up very late. It happens only when there are many input text boxes present inside the vertilize directive.

As the watch function gets executed for each character entered inside text box, the page is becoming unresponsive.

This happens mainly on firefox and IE browsers and works well on google chrome.

Is it possible to support input fields ?

Remove all listeners and watchers on Destroy

When the element is destroyed all Watcher and Listeners are maintained even though they are no longer needed. These should be removed when the element is destroyed to prevent memory leaks.

Static height, when extent content.

Hi Christopher Collins,

Thanks for excellent code, I got issue when page load height has been set as expected, But inside content I have set collapse feature which is hidden when page load, after click expand collapse operation content is hidden, height is set static.

Thanks.

Why is element.clone() used?

My page is running very slow with vertilize and i can only assume its the element.clone() duplicating loads of inputs. Why do you use this? I've seen the comment but I still don't quite understand why you can't just take the height.

Wrong height calculation with box-sizing:border-box

When element have 'box-sizing' set to border-box this code works wrong:
angular-vertilize.js:92

// Watch for tallest height change
scope.$watch(parent.getTallestHeight, function (tallestHeight) {
    if (tallestHeight) {
        element.css('height', tallestHeight);
    }
});

It is necessary to set the height through jQuery hight() to take into account this nuance:
element.height(tallestHeight);

Vertilize loaded on page-load

Hi all,

I'm using angular-vertilize and all seems to work just fine when I resize the window.
The vertilize part doesn't work on page load, correct?
I've attached two screenshots to maybe clearify my issue; the incorrect.png one shows the chart on page load, the correct.png one shows the same chart after I manually scaled the browser.

I would like the chart to always be completely in view...

Calculations are wrong if used inside Bootstrap tab (and potentially other DOM changes)

I don't see a method in the documentation to force a re-calculation, would such a thing be workable?

The calculations are fine on the first load if they are in the first active tab, but if you switch to another tab or they aren't in the first active tab, the heights are miscalculated (due to the elements not being visible at the time of calculation I would assume).

Does not work if image inside the div

Hi i have tested this plugin but these does not get the correct height if a image is there in the div as the image takes time to load that was the exact problem which i was facing in my custom directive and google search landed me here but no luck any suggestion

Disable if mobile

Hi,

Is that possible to disable if mobile size (e.g. lower than 480px)?
I don't want big gaps between two columns when I use mobile