sixthdim / angular-vertilize Goto Github PK
View Code? Open in Web Editor NEWAn AngularJS directive to vertically equalize a group of elements with varying heights.
Home Page: http://sixthdim.github.io/angular-vertilize
License: MIT License
An AngularJS directive to vertically equalize a group of elements with varying heights.
Home Page: http://sixthdim.github.io/angular-vertilize
License: MIT License
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...
This factoid should probably be mentioned in the documentation. Our project is jquery-free :)
This function is required:
element.outerWidth()
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.
It gets the tallest of all elements in the .row
not each line.
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.
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);
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.
The module is currently not available through npm! Would be great to have it there too.
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).
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.
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
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.
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 ?
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.