I’m changing the size of an element in js and I need to trigger a page reflow, or at least re-layout the containing element.
I tried this, but it doesn’t work:
$(document).foundation(“reflow”);
Neither does triggering window resize a la:
$(window).trigger(“resize”);
However, manually resizing the window with the mouse does cause the relayout I need… how do I do that in JS?
You should avoid calling a complete reflow if you can and rather just target the element(s) required. If manual resizing with the mouse works though, it is unclear whether a reflow is the correct solution. For example an equalizer or topbar positioning problem as a result of content changes will not get fixed with a window resize and needs the event listener reattaching with the updated element positions via a reflow.
It very much depends on the situation and the element in question. For example most reflows that are needed relate to equalised content in which case just reflow the equalizer, you can find all the components that support reflowing in the Zurb docs.
For example to reflow the equalizer:
foundation.jQuery(document).foundation('equalizer','reflow');
similarly for an accordion
foundation.jQuery(document).foundation('accordion','reflow');
which is another common case.
If you are going to fire this on a window resize event then you should ensure that this is debounced so it only fires once resizing is complete.
I’ve just found your other post that has more details of your situation - answered there.