My jQuery UI Dialog is displaying correctly with all the styling applied, but I am facing an issue where the first paragraph element appears overly large in the dialog box.
https://i.sstatic.net/0HfUb.png
Despite setting only the font in the CSS, adding max-height: 1.5em; causes the paragraphs to stack on top of each other as shown below.
https://i.sstatic.net/T4Whk.gif
I am unsure of what is causing this issue. Below is my code, and I suspect that it might be related to the content elsewhere on the page affecting the element's position.
#cadEditor {
display: none;
z-index: 999999 !important;
background: #222;
}
.ui-dialog {
background: #222;
}
.ui-dialog .ui-dialog-titlebar {
background: #333;
height: 40px;
top: 0;
text-align: center;
line-height: 40px;
}
.ui-dialog .ui-dialog-title {
position: absolute;
top: 0;
display: block;
width: 100%;
height: fit-content;
text-align: center;
}
#cadEditor p {
max-height: 1.5em;
}
.ui-dialog .ui-dialog-titlebar-close {
display: none;
}
.ui-dialog .ui-button {
color: #fff;
background: #222;
padding: 0.3em 0.5em;
border: #000000 1px solid;
border-radius: 5px;
margin: 1em;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="cadEditor">
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
</div>
<script>
function showCadEditor(button) {
$('#cadEditor').dialog({
dialogClass: "cadEditorDialog",
autoOpen: true,
title: "Editing Cad " + $(button).attr("forcad"),
modal: true,
resizable: false,
width: 600,
buttons: {
"Save": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
return false;
}
showCadEditor();
</script>