I am currently working on implementing a 'zoom' feature on my webapp that involves transferring a (Google) chart into a modal. However, I would like the chart to automatically expand and fit the full width of the modal.
This is the structure of my basic modal:
<div class="container-fluid">
<div class="modal fade" id="chartModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="chartModalTitle">-</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id='modalBody' class="modal-body">-</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Additionally, here is the JavaScript code I am using to extract a chart from the document:
$('.modal-chart').dblclick(function() {
let chartTitle = this.children.item(0).innerText;
let chartDiv = this.children.item(1).id;
chartDiv = '#' + chartDiv;
$('#chartModal').find('.modal-title').text(chartTitle);
$('.modal-body').html($(chartDiv).html());
$('#chartModal').modal('show');
})
I am seeking advice on where to apply CSS in order to make sure the chart dynamically fills the entire width of the modal: