Dialog: Input fields cannot be interacted with using custom CSS theme on modal dialog

[arrie1992]

Hi,

I've got a problem when I'm using input fields in my dialog with the modal enabled. This problem pumps up only in version 1.9.

Here is my code:

JS:

$(".liveviewtrigger").click(function(e){
        e.preventDefault();
        var wHeight = $(window).height() * 0.95;
        var wWidth = $(window).width() * 0.95;
        var href = $(this).attr("href");
        
        $(".liveviewtriggerDialog").dialog({
            width: wWidth,
            height: wHeight,
            buttons: {
                "Sluiten": function(){
                    $(this).dialog("close");
                }
            },
            resizable: false,
            draggable: false,
            open: function(){
                $(".m_url_prefix").blur();
                $(".liveviewContent").html('<iframe class="iPrev" height="94%" width="98%" src="'+href+'"></iframe>');
                $(".base_m_url").val(href);
            },
            close: function(){
                $(".liveviewContent").html('');
                $(".base_m_url").val('');
                $(".m_url_prefix").val('/');
            }
        });
    });

html:

<div class="liveviewtriggerDialog" style="display:none" title="Module preview">
    <div class="liveviewHeader">
        <input type="hidden" class="base_m_url" value="" />
        <table>
            <tr>
                <td><a class="reloadBtn">Herladen</a></td><td>&nbsp;</td><td><input type="text" class="m_url_prefix" size="70" value="/" /></td><td><a class="m_url_prefix_submit">Ga</a></td>
            </tr>
        </table>
    </div>
    <div class="liveviewContent"></div>
</div>

If this is really a bug, I hope this bug will be solved! No I've disabled the modal.

Kind Regards, Arjan van der Wal Netherlands

[tj.vantoll]

Thanks for taking the time to contribute to the jQuery UI project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

I threw what you provided into a jsFiddle and do not see the issue you are describing - ​http://jsfiddle.net/tj_vantoll/jvSqC/.

[arrie1992]

Hi, Thank you for your response. I've checked the code with some debugging. Now I know what the problem is. The problem only appears when I'm using a custom theme from the themeroller. When I'm switching to a default jQuery theme, the problem is gone.. Here is a link, so you can test it by yourself! ​http://jsfiddle.net/arrie1992/jvSqC/4/

Thank you! Kind regards, Arjan

[tj.vantoll]

Minified this one down - ​http://jsfiddle.net/tj_vantoll/6KFd4/. It's something about the custom CSS that's causing this. When I use the base theme or a default custom theme the issue does not occur. Will look into the custom CSS later.

[arrie1992]

I think, I've found the problem.

When I'm adding the following lines to the custom css file ( minified ) on line 158: z-index: 9999; position: relative; the problem disappears..

So you get: .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial,sans-serif; font-size: 1em; z-index: 9999; position: relative;

now I can interact with the input field again. Maybe this is a problem with all the custom css files?

Kind Regards, Arjan

[Scott González]

I'm not seeing this problem in any of the fiddles, probably because you changed the CSS file that they all link to. This is why there's an area to put CSS into the fiddle. We need a reduced test case that doesn't rely on files residing on your server.

[trac-o-bot]

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!