带有文本区域的引导弹出窗口:无法水平调整大小

Posted

技术标签:

【中文标题】带有文本区域的引导弹出窗口:无法水平调整大小【英文标题】:bootstrap popover with textarea: can't resize horizontally 【发布时间】:2018-11-18 07:59:25 【问题描述】:

当文本区域位于引导弹出框内时,我无法拖动调整其宽度:

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】:

关于

奇怪的是,我还没有发现任何描述此类问题的已知问题 行为。这种行为的原因可能是什么?

答案在Bootstrap documentation

textarea 被修改为只能调整大小 vertically 为 水平调整大小通常会“破坏”页面布局。

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

【讨论】:

以上是关于带有文本区域的引导弹出窗口:无法水平调整大小的主要内容,如果未能解决你的问题,请参考以下文章

关闭弹出模式时如何重置文本区域的大小?

如何在移动设备上调整灵活文本区域的大小?

来自 Laravel 循环的引导弹出窗口

根据内容自动调整文本区域的大小[重复]

将分组按钮的大小调整为文本区域的大小?

如何使用原型自动调整文本区域的大小?