CODEWITHSUNDEEP
jquerytwitter-bootstrapgoogle-maps
OussamaChaib
OussamaChaib

Reputation: 37

bootstrap modal box open jquery location picker does not display

I work with jquery location picker plugin for google map. Now, I open modal and the map does not display:

map display

Here is my code : 

$('#somecomponent1').locationpicker({
	location: {latitude: 46.15242437752303, longitude: 2.7470703125},
	radius: 300
	});
<a class="form-control btn" style="background-color:#FA8F13;color:white" href="#" data-target="#pwdModal1" data-toggle="modal" class="forgot-pass"> Press </a><br>

<div id="pwdModal1" class="modal fade" tabindex="-1" role="dialog" data-toggle="modal" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
              <div class="col-xs-12 col-md-6">
	              <div id="somecomponent1" style="height:400px;width:100%;">                                      
                  </div>
              </div>
         </div>
     </div>
</div>

Thanks. DEMO : http://logicify.github.io/jquery-locationpicker-plugin/

Upvotes: 2

Views: 675

Answers (2)

shu
shu

Reputation: 1956

use 'autosize' of locationpicker in the shown event of bootstarp modal.

  $('#pwdModal1").on('shown.bs.modal', function () {
        $('#somecomponent1').locationpicker('autosize');

  });

Upvotes: 1

BenG
BenG

Reputation: 15154

it advises in the documentation in the link for the demo:-

Using widget in modal

It is pretty common situation when you put widget into the container which is not visible during initialization, e.g. modal dialog. In thins case you need to call "autosize" method each time you resize container.

$('#pwdModal1').on('shown.bs.modal', function() {
  $('#somecomponent1').locationpicker('autosize');
});

Upvotes: 1

Related Questions