CODEWITHSUNDEEP
htmllegendfieldset
Jeffrey Goines
Jeffrey Goines

Reputation: 955

Strange Legend Layout on Fieldset

Why does the legend 'Description' appear below the border of the second fieldset?

Both fieldsets seem symmetrical to me (for now).

enter image description here

EDIT: javascript code and jsfiddle link

NounEditor = function() {
var nc = {}; //private members
nc.DIV = $('<form/>');

var nameFieldSet = $('<fieldset/>').appendTo(nc.DIV);
nameFieldSet.append($('<legend/>', {text: 'Name'}));

for(var i=0; i<2; i++){
    var nameDiv = $('<div/>', {text: "lang" + i })
    .append($('<input/>', {
        style: 'display: inline-block'}));
    nameFieldSet.append(nameDiv);
}
nc.DIV.append($('<p/>'));
var descFieldSet=$('<fieldset/>').appendTo(nc.DIV);
descFieldSet.append($('<lengend/>', {text: 'Description'}));
for(var i=0; i<2; i++){
    var descDiv = $('<div/>', {text: "lang" + i })
    .append($('<input/>', {
        style: 'display: inline-block'}));
    descFieldSet.append(descDiv);
}

nc.DLG = nc.DIV.dialog({
    title: 'noun editor',
    modal: false, autoOpen: false,
    close: function() {
        $(this).remove();
    }
});

this.show=function(){
    nc.DLG.dialog('open');
}

} // class NounEditor

var dlg = new NounEditor();
dlg.show();

jsfiddle link

Upvotes: 0

Views: 149

Answers (1)

James Donnelly
James Donnelly

Reputation: 128786

You've spelled legend incorrectly, meaning it isn't being given default styling by the browser:

<lengend>Description</lengend>

In your JavaScript you need to change:

 descFieldSet.append($('<lengend/>', {text: 'Description'}));

To:

 descFieldSet.append($('<legend/>', {text: 'Description'}));

Working JSFiddle demo.

Upvotes: 2

Related Questions