Problems with loading of map tiles with leafletjs and bootstrap

Question

I want to create website with leaflet map placed in bootstap tab. If I switch into tab where is leaflet instantion tiles are not loading correct(I see the grey background). I guess there is a problem with size of <div> a because if resize the browsers window tiles load correctly. Any ideas? Here is my basic concept.

https://jsfiddle.net/rjper9nz/6/

Answer 1

Trigger resize to window :

$(document).on('click','[href="#menu1"]',function(){
    setTimeout(function(){
        window.dispatchEvent(new Event('resize'));
    },300);
});

See demo.