bootstrap 带文本区域的弹出窗口:无法水平调整大小
bootstrap popover with textarea: can't resize horizontally
当文本区域位于 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')
});
})
奇怪的是,我没有发现任何描述此类行为的已知问题。这种行为的原因可能是什么?
感谢您的帮助!
关于
Strangely, I haven't found any known issues describing such a
behavior. What could be the reason for this behavior?
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>
当文本区域位于 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')
});
})
奇怪的是,我没有发现任何描述此类行为的已知问题。这种行为的原因可能是什么?
感谢您的帮助!
关于
Strangely, I haven't found any known issues describing such a behavior. What could be the reason for this behavior?
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>