bootstrap popover avec textarea : ne peut pas être redimensionné horizontalement

Question

Je n'arrive pas à redimensionner la largeur d'un textarea lorsqu'il se trouve à l'intérieur d'un popover bootstrap :

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

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

Curieusement, je n'ai trouvé aucun problème connu décrivant un tel comportement. Quelle pourrait être la raison de ce comportement ?

Merci de votre aide !

Answer 1

En ce qui concerne

Étrangement, je n'ai pas trouvé de problème connu desc comportement. Quelle pourrait être la raison de ce comportement ?

la réponse se trouve dans Documentation Bootstrap

les zones de texte sont modifiées pour n'être que redimensionnables verticalement comme le redimensionnement horizontal "casse" souvent la mise en page.

Ce comportement pourrait être surdéterminé en spécifiant resize:"both" et explicite maxWidth pour éviter textarea pour chevaucher le conteneur parent, comme indiqué ci-dessous :

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