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 :/

Answer 2

If you're trying to redraw the map after the sidebar collapses, change your event handler to the following:

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

According to the list of event handlers here, the hidden.bs.collapse event is fired when a collapse element has been hidden from the user.

Answer 3

I have the same problem, using React and a class component my (awful) solution is this:

shouldComponentUpdate = async () =>
  await new Promise(res =>
    setTimeout(() => {
      this.map.updateSize()
      res(false)
    }, 500)
  )

It's awful because the resize causes the map to jump. If there is a way of achieving the map resize without a jump that would be pretty cool.

(500 is the animation time for my drawer to close)