How do I get the height of a DOM element once the page has loaded in a Backbone / Marionette application?

Question

I have a Backbone / Marionette layout with a few views in it. I need to adjust the height of two views (essentially, two divs currently with different heights) to be the same.

I used the $(document).ready(function () {}); just before the closing body tag and after all the scripts that handle loading of the views to fetch the height but it outputs null. Why is that? How do I get the heights of the following CompositeViews when the page has completed loading?

List.TopQueries = Backbone.Marionette.CompositeView.extend({
template: "#topqueries-template",
itemView: List.QueryItem,
className: "block blue",

appendHtml: function (collectionView, itemView) {
  // Do something here
},
onRender: function () {
  // Do something here
},

onClose: function () {
  // do something here
}
});

List.FailedQueries = Backbone.Marionette.CompositeView.extend({
template: "#failedqueries-template",
itemView: List.QueryItem,
className: "block red",

appendHtml: function (collectionView, itemView) {
  // Do something here
},
onRender: function () {
  // Do something here
},

onClose: function () {
  // Do something here
}
});

Answer 1

For anything regarding checks in the UI that should be already attached to the DOM (like checking sizes of some divs as in your case), you shoud use the "onDomRefresh" event

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.view.md#view-domrefresh--ondomrefresh-event

Backbone.Marionette.ItemView.extend({
    onDomRefresh: function(){
    // manipulate the `el` here. it's already
    // been rendered, and is full of the view's
    // HTML, ready to go.
    }
});

If you need to "wait" until certain views within your Layout have been rendered and fully attached to the DOM, you should listen to the onDomRefresh of those views, not the one of the Layout.

The onDomRefresh of the Layout will be triggered when the Layout itself is fully attached to the DOM. It won't wait until all its child regions have shown a view (after all, you can show/close views in the Layout child regions at any moment, so that wouldn't have much sense).

(I thought you were asking about Marionette Layouts, thus the explanation above, I leave it there as it might be worth knowing).

Nevertheless, what Evgeniy suggests about using CSS to handle the problem with no need of Javascript may be a better approach to solve your specific problem (what I answered is the leading question: How do I get the height of a DOM element once the page has loaded in a Backbone / Marionette application? )