Leaflet map not filling area

Question

I am using Leaflet to produce different maps on a button click, but the map is not filling the whole area.

The click event grabs various longitudes and latitudes that were stored in my database and sent to the page in a datatable.

The button click looks like this:

$('#datatable').on('click', 'tr > td > a.mapClick', function(e)
{
  e.preventDefault();
  var rampName = $(this).attr('data-rampname');
  var delName = $(this).attr('data-delname');
  var actramplat = parseFloat($(this).attr('data-actramplat'));
  var actramplng = parseFloat($(this).attr('data-actramplng'));
  var actdellat = parseFloat($(this).attr('data-actdellat'));
  var actdellng = parseFloat($(this).attr('data-actdellng'));

  $('#rampName').val(rampName);
  $('#delname').val(delName);
  $('#actramplat').val(actramplat);
  $('#actramplng').val(actramplng);
  $('#actdellat').val(actdellat);
  $('#actdellng').val(actdellng);

  initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng); 

  $('#mapModal').modal('show');
}); 

function initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng)
{
  //window.dispatchEvent(new Event('resize')); <-- tried this
  //map.invalidateSize(); <-- also tried this

  var map = L.map('map').setView([actreclat,actreclng], 8);

  L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=zAlHsNvo6jxv4ENZxW3R', {
    attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
  }).addTo(map);
}

In my header, I styled the map as follows:

<style>
  height:275px;
  width:100%;
</style>

In an attempt to prevent a duplicate post, I attempted to use answers from the following post to no avail:

Data-toggle tab does not download Leaflet map

The map continues to NOT fill the whole area.

What adjustments do I need in order to ensure the map fills the whole area?

Answer 1

I added the following modal command and threw the function call inside of it:

$('#datatable').on('click', 'tr > td > a.mapClick', function(e)
{
  e.preventDefault();
  var rampName = $(this).attr('data-rampname');
  var delName = $(this).attr('data-delname');
  var actramplat = parseFloat($(this).attr('data-actramplat'));
  var actramplng = parseFloat($(this).attr('data-actramplng'));
  var actdellat = parseFloat($(this).attr('data-actdellat'));
  var actdellng = parseFloat($(this).attr('data-actdellng'));

  $('#rampName').val(rampName);
  $('#delname').val(delName);
  $('#actramplat').val(actramplat);
  $('#actramplng').val(actramplng);
  $('#actdellat').val(actdellat);
  $('#actdellng').val(actdellng);

  $('#mapModal').modal('show');

  // added below modal function
  $("#actionMatchbackModal").on("shown.bs.modal", function () {
    initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng); 
  });
}); 

Then, inside the actual function, I added the map.invalidateSize() after the creation of the map variable:

function initMap(rampName, delname, actramplat, actramplng, actdellat, actdellng)
{
  var map = L.map('map').setView([actreclat,actreclng], 8);
  map.invalidateSize();

  L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=zAlHsNvo6jxv4ENZxW3R', {
attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
  }).addTo(map);
}

Now the map fills the whole area.