title: Leafletjs Routing machine button collapse button not loading
body: <p>I am using django 1.10.5, booststrap 4.0 and LeafletJs 1.0.3 with routing machine plugin and geocoder.
  Now I have the following problem, the collapse button of the control pannel for routing machine is not loading (its not showing up in the html code) when the map is bigger than 640 x 640px when the page is loaded the first time. 
  <a href="https://i.stack.imgur.com/04CeF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/04CeF.png" alt="map bigger than 600x600px and no collapse button"></a>
  <a href="https://i.stack.imgur.com/8Qn7C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Qn7C.png" alt="Map 500x500px with collapse button visible"></a>
  there are no problems when I make the map bigger with chrome dev tools after the page is fully loaded with the map size set in css to 640x640px or smaller.</p>
  
  <p>I have a version of that works the way it should, but this is without django and bootstrap and I need it to work with both.</p>
  
  <p>css code</p>
  
  <pre><code>.map-add-size{
    position: relative;
    width: 500px;
    height:500px;
  }
  </code></pre>
  
  <p>.html</p>
  
  <pre><code>{% extends 'base.html' %}
  {% load static %}
  {% load crispy_forms_tags %}
  {% block css %}
    &lt;link href="{% static 'routes/css/add.css' %}" rel="stylesheet"&gt;
    {{block.super}}
      &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"&gt;
      &lt;link href="{% static 'routes/css/leaflet-routing-machine.css' %}" rel="stylesheet" &gt;
      &lt;link href="{% static 'routes/css/Control.Geocoder.css' %}" rel="stylesheet"&gt;
  
  {% endblock %}
  
  {% block content %}
  
      &lt;h3&gt;Add a new route&lt;/h3&gt;
        &lt;div class="row"&gt;
          &lt;div class="route-edit"&gt;
            &lt;div class="col-xs-6"&gt;
              &lt;p&gt;Route page information&lt;/p&gt;
              &lt;form id="mainForm" method="post" class="form"&gt;
                {% csrf_token %}
                {{ routeAddForm|crispy }}
                  &lt;div class="row route-edit"&gt;
                    &lt;button type="submit" name="save_route" class="btn btn-primary"&gt;Save and continue&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class ="row"&gt;
        &lt;div class="cols-xs-8 map-container-div"&gt;
          &lt;p&gt;Add start and end markers by left clicking on the map. &lt;br&gt;
            Add markers by clicking on the lines inbetween the start and end markers&lt;br&gt;
            Remove markers by clicking on the cross next to the address of the marker.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="map-add" class="map-add-size"&gt;&lt;/div&gt;
  {% endblock %}
  
  {%block javascript %}
  {{block.super}}
  &lt;script src="{% static 'routes/js/cookie.js' %}"&gt;&lt;/script&gt;
  &lt;script&gt;
  var csrftoken = Cookies.get('csrftoken');
  &lt;/script&gt;
  &lt;script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"&gt;&lt;/script&gt;
  &lt;script src="{% static 'routes/js/leaflet-routing-machine.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'routes/js/Control.Geocoder.js' %}"&gt;&lt;/script&gt;
  &lt;script src="{% static 'routes/js/map-add.js' %}"&gt;&lt;/script&gt;
  {%endblock%}
  </code></pre>
  
  <p>javascript</p>
  
  <pre><code>window.lrmConfig = {
  //    serviceUrl: 'https://api.mapbox.com/directions/v5',
  //    profile: 'mapbox/driving',
  };
  
  var map = L.map('map-add').setView([51.505, -0.09], 3);
  
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}{r}.png', {
      attribution: '© OpenStreetMap contributors'
  }).addTo(map);
  
  
  var geocoder = L.Control.Geocoder.mapzen('search-DopSHJw'),
      control2 = L.Control.geocoder({
      geocoder: geocoder,
      defaultMarkGeocode: false
    }).on('markgeocode', function(e){
      var bbox = e.geocode.bbox;
              var poly = L.polygon([
                   bbox.getSouthEast(),
                   bbox.getNorthEast(),
                   bbox.getNorthWest(),
                   bbox.getSouthWest()
              ]).addTo(map);
              map.fitBounds(poly.getBounds());
    }).addTo(map);
  
  control = L.Routing.control(L.extend(window.lrmConfig, {
      geocoder: L.Control.Geocoder.nominatim(),
      routeWhileDragging: true,
      reverseWaypoints: true,
      showAlternatives: true,
      altLineOptions: {
          styles: [
              {color: 'black', opacity: 0.15, weight: 9},
              {color: 'white', opacity: 0.8, weight: 6},
              {color: 'blue', opacity: 0.5, weight: 2}
          ]
      },
  })).addTo(map);
  
  
  L.Routing.errorControl(control).addTo(map);
  
  function createButton(label, container) {
      var btn = L.DomUtil.create('button', '', container);
      btn.setAttribute('type', 'button');
      btn.innerHTML = label;
      return btn;
  }
  
  map.on('click', function(e) {
      var container = L.DomUtil.create('div'),
          startBtn = createButton('Start from this location', container),
          destBtn = createButton('Go to this location', container);
  
      var removeContainer = L.DomUtil.create('div'),
      removeBtn = createButton('Remove waypoint',removeContainer);
  
      L.popup()
          .setContent(container)
          .setLatLng(e.latlng)
          .openOn(map);
  
              L.DomEvent.on(startBtn, 'click', function() {
        control.spliceWaypoints(0, 1, e.latlng);
        map.closePopup();
      });
  
          L.DomEvent.on(destBtn, 'click', function() {
          control.spliceWaypoints(control.getWaypoints().length - 1, 1, e.latlng);
          map.closePopup();
      });
  
  });
  
  // Submit post on submit
  $('#mainForm').on('submit', function(event){
      event.preventDefault();
      console.log("form submitted!");  // sanity check
      postData();
  });
  
  var successText;
  function postData(){
    console.log("postData is working!");// sanity check
    var formData = $("#mainForm").serializeArray();
  
    var routeArray =Array(),
    routeArray =  control.getWaypoints();
  
    var json_obj = JSON.stringify(routeArray);
  
    formData.push({name:'json_data',value:json_obj});
    console.log("form data that is send")
    console.log(formData);
    $.post({
           type: 'POST',
           url: '/routes/add/',
           data: formData,
       });
  }
  </code></pre>