Search code examples
javascripthtmltwitter-bootstraphtml5-audio

Audio tag inside the bootstrap modal working fine but the download button position is out of modal

I'm trying to add audio tag inside the modal but the download button is out of modal, this is tested on chrome.

enter image description here

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Open modal with Audio
</button>

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <audio controls controlsList="download" style="width:100%">
          <source src="https://www.w3schools.com/TagS/horse.ogg" type="audio/ogg">
          <source src="https://www.w3schools.com/TagS/horse.mp3" type="audio/mpeg">
          Your browser does not support the audio element.
        </audio>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

I know we can hide the download button but in case we want to keep it, not sure if there is a solution. here is the code on pen

Solution

  • Apply transform: none; property on the modal-dialog class.