[GIS] Map put on hidden tab not shown after tab comes to front in OpenLayers 4

Question

I use OpenLayers4 with bootstrap-native.
My page has bootstrap tablist, and I put map layers on a tab which is initially hidden.
But after the tab is selected and comes to front, the map is white-out and is not shown..

How can I make it visible?

I tried

mapObject.renderSync();

but it doesn't work.

I also tried this map refresh but it throws error "TypeError: source.getParams is not a function".

I found a workaround by resizing the page, then map is shown.
But I want to display the map without having to resize the page.

How I can solve this?

Answer 1

You will need map.updateSize
If you set size of map target element(div) in style(css), simply call map.updateSize.
sample codepen here