jQuery对话框:如何控制按钮窗格高度
如何在不更改CSS文件的情况下手动调整/设置jQuery对话框中按钮窗格的高度?我想调整包含消息的DIV的高度,以及包含Javascript中用绿线标记的按钮的DIV的高度jQuery对话框:如何控制按钮窗格高度,jquery,css,jquery-ui,jquery-ui-dialog,Jquery,Css,Jquery Ui,Jquery Ui Dialog,如何在不更改CSS文件的情况下手动调整/设置jQuery对话框中按钮窗格的高度?我想调整包含消息的DIV的高度,以及包含Javascript中用绿线标记的按钮的DIV的高度 function showMessageDialog(title, message, width){ // create div if it doesn't exist already if(!$("#msgDialogDiv").length) { $("<DIV><
function showMessageDialog(title, message, width){
// create div if it doesn't exist already
if(!$("#msgDialogDiv").length) {
$("<DIV></DIV>").appendTo("body").attr("id","msgDialogDiv");
}
// set the message
$("#msgDialogDiv").html(message).css("color","red");
// show the dialog
$("#msgDialogDiv").dialog({
modal: true, resizable: false, draggable: false, title: title, width: width,
buttons: {OK: function(){$(this).dialog("close");}}
});
// This changes the height as I want.
// $("#msgDialogDiv").css({"overflow":"hidden","height":"10px"});
// this changes the font on button
//$("#msgDialogDiv").dialog("widget").find(".ui-button-text").css("font-size", "11px");
return;
}
showMessageDialog("Hello Stackoverflow!", "This is my first question on stackoverflow",400);
在发布这个问题时,我试图调整DIV的高度,结果成功了。我也尝试过改变按钮的字体大小,但那只是改变了按钮的大小。我想控制整个DIV的大小。这是由于按钮周围的填充吗?只需更改jQueryUI.css文件将以下内容放入您自己的自定义css文件中,在jQuery UI css之后加载:
.ui-dialog .ui-dialog-buttonpane {
margin: 0px;
padding: 0px;
}
由于CSS特殊性规则,需要使用双选择器。如果没有.ui对话框前缀,则无法覆盖先前加载的默认值
看我自己找到的。这就是我要找的
// set the size of the button
$("#msgDialogDiv").dialog("widget")
.find(".ui-button-text").css("font-size", "10px")
// this is not required. but doesn't hurt. To hardcode the height,
// just change to height instead of minHeight
//$("#msgDialogDiv").css({"minHeight":"10px"})
// button pane style
$("#msgDialogDiv").dialog("widget").find(".ui-dialog-buttonpane")
.css({"padding":".1em .1em .1em 0","margin":"0 0 0 0"} )
// button style
$("#msgDialogDiv").dialog("widget").find("button")
.css({"padding":"0 .2em 0 .2em","margin":"0 .5em 0 0"} )
这是一个老帖子。但这也可以通过以下方式实现 假设您在html中有以下div
<div id="no-record-found-message" title="No Record found" >
<p>No Record found for the selected event</p>
</div>
css
最好将覆盖放在jQueryUICSS之后加载的您自己的CSS文件中,这样您就可以在以后更新jQueryUI,而无需将更改向后移植。首先,我尝试改变css,效果很好。然后我在html块中包含了样式,但没有更改css,因为特殊性规则,它不起作用。但是,我想在不接触css文件的情况下从Javascript控制它。现在我知道为什么边距和填充不起作用了。我没有在其中包含.ui对话框。是否有一种方法可以选择此项并使用.css添加/修改,以便在不修改css的情况下从javascript更新它?@Lobo-是的,直接应用于元素的样式应优先于样式表中的样式。
function createNoRecordFoundDialog(div) {
var $noRecordFoundDiv = $("#" + div);
var $noRecordFoundDialog = $noRecordFoundDiv.dialog({
autoOpen: false, // set this to false so we can manually open it
dialogClass: "noRecordFound", // your css class
width: 250,
show: {
effect: "scale",
duration: 1000
},
hide: {
effect: "scale",
duration: 1000
},
modal: true,
resizable: false,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
}); // end of dialog
return $noRecordFoundDialog;
}
.noRecordFound .ui-dialog-buttonpane {
margin: 0px !important;
padding: 0px !important;
}
.noRecordFound .ui-dialog-content {
min-height: 38px !important;
}