OpenLayers: How can I redraw a map after a sidebar is collapsed?

Question

I am using OpenLayers to display a map, and AdminLte for the interface.

My problem : When collapsing the main left sidebar on a given page, all the boxes and what it contains changes size (I don't really know how) so the maps gets bigger as well. The problem is that when it happens, all the features displayed on the maps apparently change position and are not where they are supposed to be anymore.

What I would like: To redraw the map after the sidebar collapses.

Any suggestion?

I tried:

$('.navbar-collapse').on('shown.bs.collapse', function() {
    map.updateSize();
});

and:

$('.sidebar').on('shown.bs.collapse', function() {
   map.updateSize();
});

but to no avail...

EDIT : My question is similar to this one: OpenLayers: How to re-align mouse coordinates and vector layers after fluid css rendering of map div but his solution doesn't work for me :)

EDIT 2 : Just to clarify: I think the solution to my problem would be to call the map.updateSize() method when the sidebar has finished collapsing. The problem is that I don't know how to catch the moment when the sidebar has finished collapsing/expanding!

Answer 1

A temporary solution I found was to start a timeout when the button triggering the sidebar collapse and then call the map.updateSize() method:

  $('.sidebar-toggle').click(function(){
      setTimeout(function(){ map.updateSize(); }, 500);             
  });

It works...but it's kind of meh :/