增加标题栏和其他元素'宽度以覆盖整个JQuery对话框

Increasing the titlebar and other elements' width to cover the whole JQuery dialog

本文关键字：覆盖 对话框 JQuery 标题栏 其他 元素 增加      更新时间：2023-09-26

我有一个JQuery对话框，在按钮单击时显示一个表。

我需要

:
1. 对话框的标题栏，以覆盖对话框的整个宽度。目前，标题栏有一些对话框从四面八方露出来。
2. 表中有一行。这一行应该覆盖整个对话框。如何删除行两边的边距?将边距、内边距设置为0没有帮助。

HTML: 

<button id="x">Click</button>
<!-- The part below is for the recorder dialog. -->
<div id="dialog-form-speakingPractice" class="ui-helper-hidden">
    <table id="recordTable" width="100%">
        <tr>
            <td colspan="3" id="word2Record">'Word'</td>
        </tr>
    </table>
</div>
Javascript/JQuery: 

$(document).ready(function () {
    $("#x").click(function () {
        alert("Button clicked");
        startRecorderDialog();
        $("#dialog-form-speakingPractice").dialog("open");
    });
    function startRecorderDialog() {
        $("#dialog-form-speakingPractice").dialog({
            autoOpen: false,
            height: 'auto',
            width: 'auto',
            modal: true,
            dialogClass: 'recorderDialogCSS',
            open: function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            }
        });
        $("#dialog-form-speakingPractice").dialog('option', 'title', 'Listen to Word');
    }
});
CSS: 

.ui-widget-overlay {
    background: transparent;
}
.recorderDialogCSS.ui-dialog {
    color: black;
    background: rgb(230, 230, 230);
}
.recorderDialogCSS .ui-dialog-titlebar {
    font-family: Arial;
    color: white;
    background: rgb(0, 83, 146);
    text-align: center;
    border: 0px;
}
#recordTable {
    padding: 0;
    margin: 0;
}
#recordTable td {
    border: 1px solid black;
    width: 100%;
    margin: 0;
    padding: 0;
}
#word2Record {
    background: rgb(133, 184, 56);
    font-family: Arial;
    color: white;
    margin: 0;
    text-align: center;
}

这里还有一个JFiddle

更新后的jsFiddle。更改:

.recorderDialogCSS.ui-dialog {
    ...
    padding: 0;
}
#dialog-form-speakingPractice {
    padding:0;
}
#recordTable {
    ...
    border-collapse: collapse;
}

添加这个 CSS : 

.ui-dialog{
   padding:0px; !important
}

删除或注释下面两个类中的padding 

.ui-dialog {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    /*padding: .2em;*/
    outline: 0;
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    /*padding: .5em 1em;*/
    background: none;
    overflow: auto;
}
相关文章：