Bootstrap Modal：使正文内容全宽

Question

I'm working to create a 'zoom' option on my webapp that will copy a (google) chart into a modal, but I want the chart to expand to the full width of the modal.

My plain-vanilla 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">&times;</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>

and the Javascript that I am using to pluck a chart out of 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'm wondering where to apply some css to have the chart fill the width of the modal:

Answer 1

you can give position relative to parent div and give position absolute to your Child div

.modal-body{
 Position:relative;
}
 $(chartDiv).css({top:'0';right:'0';bottom:'0';left:'0';})