twitter-bootstrap - 带文本区域的 Bootstrap 弹出窗口 : can't resize horizontally

Question

当文本区域位于 Bootstrap 弹出窗口内时，我无法拖动调整文本区域的宽度:

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')
  });
})

奇怪的是，我没有发现任何描述这种行为的已知问题。造成这种行为的原因是什么？

感谢您的帮助!

Answer 1

关于

Strangely, I haven't found any known issues describing such a behavior. What could be the reason for this behavior?

答案就在 Bootstrap documentation

textarea's are modified to only be resizable vertically as horizontal resizing often “breaks” page layout.

可以通过指定 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>