我已经准备好了a simple jsFiddle对于我的问题:
如您在上面的屏幕截图中所见,有一个代表聊天区域的黄色 div
元素,在其下方有用于输入聊天消息的文本输入框。
请帮我解决我的问题-
如何“拉伸(stretch)”chatDiv
和 chatInput
元素,以便它们在对话框中占据最大的空间量?
正如您在屏幕截图中看到的那样,目前这些元素周围有很多填充,尤其是文本输入元素周围(因为我不知道,除了设置 size
之外如何调整其宽度属性)。
显然,我正在寻找一种最便携的解决方案,适用于任何(或大多数)浏览器和字体大小。
这是我的代码-
function sendChat() {
var str = $('#chatInput').val().trim();
$('#chatDiv').append('<br>' + str);
$('#chatInput').val('');
var h = $('#chatDiv').prop('scrollHeight');
$('#chatDiv').animate({ scrollTop: h }, 1000);
$('#chatInput').focus();
}
$('#chatInput').on('keyup input', function(e) {
if (e.keyCode == 13) {
sendChat();
}
});
$('#chatDlg').dialog({
minWidth: 500,
modal: true,
buttons: {
'Send': function() {
sendChat();
},
'Close': function() {
//$(this).dialog('close');
}
}
});
@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css");
div#chatDiv {
margin: 0 auto;
background-color: yellow;
height: 120px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="chatDlg">
<div id="chatDiv"></div>
<p align="center">
<input id="chatInput" type="text" size="20" />
</p>
</div>
这是我想要的图片:
最佳答案
可以给需要100%宽度的元素添加一个class
属性
然后为该类定义 CSS:
.fullwidth {
width: 100%;
}
关于javascript - 如何在 jQuery 对话框中拉伸(stretch) div 和输入元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39621571/