CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sriram
Sriram

Reputation: 10558

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

I have a JQuery dialog box that displays a table on button click.

I need:
1. The titlebar of the dialog box to cover the entire width of the dialog box. Currently, the title bar has some of the dialog box peeking out on all sides.
2. There is a row in the table. The row should cover the entire dialog box. How do I remove the margins on either side of the row? Setting margin, padding to 0 does not help.

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;
}

I also have a JFiddle here.

Upvotes: 1

Views: 130

Answers (3)

Ilya Luzyanin
Ilya Luzyanin

Reputation: 8110

Here is updated jsFiddle. Changes made:

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

Upvotes: 1

Horen
Horen

Reputation: 11382

Delete or comment the padding in the two following classes

.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;
}

Upvotes: 1

Youness
Youness

Reputation: 1495

add this to your CSS :

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

Upvotes: 1

Related Questions