Заставьте Bootstrap модально адаптироваться к тексту - PullRequest
Новая
       40

Заставьте Bootstrap модально адаптироваться к тексту

0 голосов
/ 06 апреля 2019

У меня есть модальный Bootstrap: 

<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Documento</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body" style="color:black;" id="MSJ">
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
    </div>
  </div>

Модал показывает сообщение, которое не всегда одинаково. И я показываю это на экране, используя JQUERY, как это: 

$("#MSJ").html(Respuesta);
$("#ModalMSJ").modal("show");

и я хочу, чтобы он адаптировался к тексту сообщения.

Вот как это выглядит в данный момент, когда отображается одно из сообщений:

Error

Как мне сделать так, чтобы модал адаптировался к тексту сообщения?

1 Ответ

0 голосов
/ 08 апреля 2019

Мне просто нужно было добавить style=" width: auto; height:auto !important;" к div class="modal-dialog" 

<div class="modal fade" id="ModalMSJ" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" style=" width: auto; height:auto !important;" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" style="font-weight: bold; color:black;" id="exampleModalLabel">Documento</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      </div>
      <div class="modal-body" style="color:black;" id="MSJ">
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal">Cerrar</button>
      </div>
    </div>
    </div>
  </div>
...