jQuery dialog: how to control the button-pane height
Tags: jquery,css,jquery-ui,jquery-ui-dialog
Problem :
How to manually adjust/set the height of the button-pane in the jQuery dialog without chaning the CSS file? I want to adjust the height of the DIV that contains the message and the DIV that contains the button(marked in green lines) from Javascript.
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);
While posting this question I tried to adjust the DIV height and it worked. I also tried changing the font-size of button, but that just changes the size of the button. I want to control the size of that entire DIV. is it due to the padding around the button?
Solution :
Found it myself. This is what I was looking for.
// 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"} )
CSS Howto..
Change your JS to: $(document).ready(function () { $(".posts").click(function () { $(this).find('.expand').toggle(); $(this).find('.preview').toggle(); }); }); Or more simple: $(document).ready(function () { $(".posts").click(function () { $(this).find('.expand, .preview').toggle(); }); }); To toggle means,...
In your CSS: background-image: url(background.jpg); or background-image: url(/assets/background.jpg); In environments/production.rb: # Disable Rails's static asset server (Apache or nginx will already do this) config.serve_static_assets = false # Compress JavaScripts and...