загрузочный поповер с textarea: невозможно изменить размер по горизонтали - PullRequest
Новая
       22

загрузочный поповер с textarea: невозможно изменить размер по горизонтали

0 голосов
/ 18 ноября 2018

Я не могу перетащить или изменить размер ширины текстовой области, когда она находится во всплывающем окне начальной загрузки:

https://jsfiddle.net/aq9Laaew/273911/

Или в коде: 

<button id="popoverBtn" type="button" class="btn btn-lg btn-danger">
Click to toggle popover
</button>

$(function () {
  $('#popoverBtn').popover({
    'title': 'this is a textarea test with a long title',
    html: true,
    trigger: 'click hover',
    content: document.createElement('textarea')
  });
})

Странно,Я не нашел никаких известных проблем, описывающих такое поведение.В чем может быть причина такого поведения?

Спасибо за вашу помощь!

1 Ответ

0 голосов
/ 19 ноября 2018

Относительно

Странно, я не нашел ни одной известной проблемы, описывающей такой поведение. В чем может быть причина такого поведения?

ответ находится в документации Bootstrap

Текстовые поля изменены только для изменения размера по вертикали как горизонтальное изменение размера часто «ломает» макет страницы.

Это поведение можно было бы переопределить , указав resize:"both" и явное maxWidth, чтобы textarea не перекрывал родительский контейнер, как показано ниже: 

$(function () {
  $('#popoverBtn').popover({
    'title': 'this is a textarea test with a long title',
    html: true,
    trigger: 'click hover',
    content: createContent()
  })
  .on("show.bs.popover", function() {
    const parentEl = $(this).data("bs.popover").getTipElement();
  });
})


function createContent(){
   var textArea = $('<textarea class="textarea-resiable" />'); 
   textArea.css({resize:"both",maxWidth: '250px'});
   return textArea;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>



<button id="popoverBtn" type="button" class="btn btn-lg btn-danger">Click to toggle popover</button>
...