From 6b154a5ef1192e1e7febcefe39b6a00f131a141c Mon Sep 17 00:00:00 2001 From: patrickvuarnoz Date: Thu, 20 Aug 2015 16:26:53 +0200 Subject: [PATCH] Deal with vertical margins and fractions of heights I've added two extensions.... Deal with vertical margins: By calculating the height of an object with .outerHeight(true) and setting the new height the same way it's possible to include margins in the calculation. This makes especially sense in combination with the other extension. Deal with fractions of the height: The idea is that if you have some kind of a setup with boxes where some boxes must be exactly half the height of the other boxes you can specify the fraction with "vertilize='0.5'". If you leave it out (just use "vertilize") it defaults to 1 which leads to the default behaviour. It allows to have any fraction, i.e. half, third, quarter, ... If you have equal margins on the full and half boxes in such a setup then the combination of the two leads to a layout where you have the backgrounds horizontally aligned. --- angular-vertilize.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/angular-vertilize.js b/angular-vertilize.js index 6556218..40655f6 100644 --- a/angular-vertilize.js +++ b/angular-vertilize.js @@ -60,6 +60,10 @@ restrict: 'EA', require: '^vertilizeContainer', link: function(scope, element, attrs, parent){ + + // Get scale + var scale = (attrs.vertilize)?(attrs.vertilize):(1); + // My index allocation var myIndex = parent.allocateMe(); @@ -76,7 +80,7 @@ visibility: 'hidden' }); element.after(clone); - var realHeight = clone.height(); + var realHeight = (1/scale)*clone.outerHeight(true); clone['remove'](); return realHeight; }; @@ -91,7 +95,7 @@ // Watch for tallest height change scope.$watch(parent.getTallestHeight, function(tallestHeight){ if (tallestHeight){ - element.css('height', tallestHeight); + element.outerHeight(scale*tallestHeight, true); } }); }