twitter-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')
});
})
奇怪的是,我还没有发现任何描述这种行为的已知问题。这种行为的原因可能是什么?
谢谢你的帮助!
解决方案
关于
奇怪的是,我还没有发现任何描述这种行为的已知问题。这种行为的原因可能是什么?
textarea 被修改为只能垂直调整大小,因为水平调整大小通常会“破坏”页面布局。
可以通过指定和显式来覆盖此行为,以防止与父容器重叠,如下所示: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>
推荐阅读
- html - 如何在一行上获取文本
- sql - Azure SQL 数据库重命名失败(错误 1801:已存在)但 DB 不存在
- python - 尝试使用正则表达式在 python 中实现函数来验证输入?
- c++ - C ++用户输入x数量的输入而不是总和
- javascript - 我在这个验证功能上做得正确吗?
- python - 在 python 中使用 Tkinter 模块和背景颜色模块不起作用
- android - 更新 Android Studio 4.1 后,代码显示为白色
- node.js - SSO nodeJs Azure AD
- java - 当从 EventBus @ConsumeEvent 调用 Quarkus Panache Repository 时,调用会静默失败
- java - Java Spring:从服务器关闭套接字会话