I'm using jquery full calendar with angularJS and angularstrap. The problem it seems is that the calendar will only display when I either click on one of the buttons in the calendar or resize the browser window. This calendar is being loaded in a modal box initialised using angularstrap.
I appreciate the help.
Plunkr here: LINK
Modal HTML is in search_modal.html Calendar controller is:calendarCtrl.js Parent controller is search.js
Edit: After experiencing the same problem with google maps and a gallery I've attempted to implement I dont think this is a problem directly related to the calendar rather its more related to the modal box itself. Anything thats interactive and involves javascript does not scale properly according to the size of the modal box. Anyone have any ideas on how to fix this?
Your problem seems to be similar to How can I list two Linkedin Follow Buttons in a Twitter Bootstrap Dropdown
Your modal is set by:
<a data-bs-modal="'search_modal.html'" href="#" class="ng-scope" data-target="#search_modal-003" data-toggle="modal">Search</a>
<div id="search_modal-003" class="modal hide fade ng-scope in" tabindex="-1" aria-hidden="false">
Removing the display:none (give space) before the calendar insert will fix your problem.
With the code above b.e. add #search_modal-003 {display:block; } to your custom css.