jQuery UI Modal Dialogs not compatible with .input-prepend & .input-append

Yeah, I know…weird, right?

It’s for real though: http://jsfiddle.net/QNxPE/

The problem seems to be related to this set of styles:

.input-prepend input:focus,
.input-append input:focus,
.input-prepend .uneditable-input:focus,
.input-append .uneditable-input:focus {
  position: relative;
  z-index: 2;
}

Changing that to position:inherit fixed the issue. I’m not sure what the motivation of position: relative (or the z-index: 2) here is, so I’m submitting this rather than a patch request.

At any rate, the position:inherit thing seems to fix it.

[nuckz]

looks like it has something to do with the input z-index. When you call:

$(‘.ui-dialog-content input:visible’).css(‘z-index’,9999);

after dialog-open, it seems to fix it!

[psecret]

$dialog.dialog({
    open:function () {
        $(this).find('.input-append input:focus, .input-prepend input:focus')
            .css('z-index', parseInt($(this).closest('.ui-dialog').css('z-index')), 'important')
            .css('font-size', '14px', 'important');
    }
});