Opened 6 years ago

Closed 6 years ago

#8774 closed bug (invalid)

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

Reported by: arrie1992 Owned by: arrie1992
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.9.1
Keywords: Cc:
Blocked by: Blocking:

Description

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

Change History (6)

comment:1 Changed 6 years ago by tj.vantoll

Owner: set to arrie1992
Status: newpending

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/.

comment:2 Changed 6 years ago by arrie1992

Status: pendingnew

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

comment:3 Changed 6 years ago by tj.vantoll

Status: newopen
Summary: Input fields ( type text ) automatic readonly when modal enabledDialog: Input fields cannot be interacted with using custom CSS theme on modal dialog

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.

comment:4 Changed 6 years ago by 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

comment:5 Changed 6 years ago by Scott González

Status: openpending

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.

comment:6 Changed 6 years ago by trac-o-bot

Resolution: invalid
Status: pendingclosed

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!

Note: See TracTickets for help on using tickets.