search

Esri / calcite-maps

A Bootstrap theme for designing, styling and creating modern map apps.
http://esri.github.io/calcite-maps/samples/index.html
Apache License 2.0
238 stars 173 forks source link

Bootstrap Modal styling issues...? #200

Closed mgleahy closed 6 years ago

mgleahy commented 6 years ago

I'm having problems with the bootstrap model built into calcite-maps...I think this may be related to a similar issue (#174). Maybe the modals are actually working fine, but it doesn't appear right to me. I can get a modal sort-of working: open up any of the JSAPI/dojo based samples, and run this code in the console:

require(['dojo/query', 'bootstrap/Modal'], function(query){

  query('body').append('<div class="modal" id="myModal"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>Modal body</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button></div></div>');

  query('#myModal').modal();

});

It works, but the styling seems off. Same thing happens in the leaflet/jquery demo:

$('body').append('<div class="modal" id="myModal"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>Modal body</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button></div></div>');

$('#myModal').modal();

Is the current appearance/behaviour of the bootstrap modals in calcite-maps expected?

mgleahy commented 6 years ago

Allow me to resolve my own issue...I was basing the HTML structure of the dialog from what I found in the dojo-bootstrap docs. However, if I follow the current (non-dojo) Bootstrap docs, the HTML for my modal has a few more elements in it. So this code works fine:

require(['dojo/query', 'bootstrap/Modal'], function(query){

  query('body').append('<div class="modal" id="myModal"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p>Modal body</p></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button></div></div></div></div>');

  query('#myModal').modal();

});

I was missing the modal-dialog and modal-content div elements surrounding the header, body, and footer elements inside the dialog.