bootstrap popover with textarea: can't resize horizontally

Question

I can't drag-resize a textarea's width when it's within a bootstrap popover:

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

Or in code:

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

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

Thanks for your help!

Answer 1

Regarding

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

the answer resides in Bootstrap documentation

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

This behavior could be overridden by specifying resize:"both" and explicit maxWidth to prevent textarea to overlap the parent container as demonstrated below:

$(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>