Invalid HTML: div inside label. Causes CSS rendering problems.

acole86

Problem:

DataTables generates a div inside a label, which is invalid HTML, and this causes CSS rendering problems.

Editor v1.4.0 Lines 176-189:

// Field HTML structure
var template = $(
    '<div class="'+classes.wrapper+' '+classes.typePrefix+opts.type+' '+classes.namePrefix+opts.name+' '+opts.className+'">'+
        '<label data-dte-e="label" class="'+classes.label+'" for="'+opts.id+'">'+
            opts.label+
            '<div data-dte-e="msg-label" class="'+classes['msg-label']+'">'+opts.labelInfo+'</div>'+
        '</label>'+
        '<div data-dte-e="input" class="'+classes.input+'">'+
            // Field specific HTML is added here if there is any
            '<div data-dte-e="msg-error" class="'+classes['msg-error']+'"></div>'+
            '<div data-dte-e="msg-message" class="'+classes['msg-message']+'"></div>'+
            '<div data-dte-e="msg-info" class="'+classes['msg-info']+'">'+opts.fieldInfo+'</div>'+
        '</div>'+
    '</div>');

Solution:

Recommend moving the msg-label div outside of the label. I have also added another div wrapper around the label for my styling preferences.

// Field HTML structure
var template = $(
    '<div class="'+classes.wrapper+' '+classes.typePrefix+opts.type+' '+classes.namePrefix+opts.name+' '+opts.className+'">'+
        '<div class="'+classes.label+'">'+
            '<label data-dte-e="label" class="'+classes.label+'" for="'+opts.id+'">'+
                opts.label+
            '</label>'+
        '</div>'+
        '<div data-dte-e="msg-label" class="'+classes['msg-label']+'">'+opts.labelInfo+'</div>'+
        '<div data-dte-e="input" class="'+classes.input+'">'+
            // Field specific HTML is added here if there is any
            '<div data-dte-e="msg-error" class="'+classes['msg-error']+'"></div>'+
            '<div data-dte-e="msg-message" class="'+classes['msg-message']+'"></div>'+
            '<div data-dte-e="msg-info" class="'+classes['msg-info']+'">'+opts.fieldInfo+'</div>'+
        '</div>'+
    '</div>');

allan

Thanks for letting me know about this. Out of interest, what rendering issues have you seen with this? I've not seen a problem with it.

The fix looks good, although I'm concerned about backwards compatibility so it won't be in 1.4.1 which I'm currently wrapping up. It will need a bit more research.

Allan

acole86

When styling the label in a bubble editor to have a background and border, the right side of the border (with its padding) would break off, go outside the left margin and center in height with the middle of the actual label. It's like the div for the label message "broke" the CSS and pushed any of the label's content after real text into an invisible next line. I observed this behavior in both Safari and Chrome. It took quite a bit of Googling to figure out what was going on!

Thank you for making such a great product, BTW. Other than this, I really haven't encountered any bugs.

I have added a few more field types to Editor for my application (for example, bitwise checkboxes), would you be interested in considering them to be merged into the project?

allan

I have added a few more field types to Editor for my application (for example, bitwise checkboxes), would you be interested in considering them to be merged into the project?

Sounds interesting. I wouldn't include them in the core, but I could offer them as plug-ins.

Thanks,
Allan