#8774 closed bug (invalid)

Opened November 05, 2012 04:49PM UTC

Closed November 21, 2012 09:12AM UTC

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

Attachments (0)
Change History (6)

Changed November 06, 2012 02:49AM UTC by tj.vantoll comment:1

owner: → arrie1992
status: new → pending

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

Changed November 06, 2012 09:35AM UTC by arrie1992 comment:2

status: pending → new

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

Changed November 06, 2012 02:32PM UTC by tj.vantoll comment:3

status: new → open
summary: Input fields ( type text ) automatic readonly when modal enabled → Dialog: 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.

Changed November 06, 2012 02:58PM UTC by arrie1992 comment:4

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

Changed November 06, 2012 03:50PM UTC by scottgonzalez comment:5

status: open → pending

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.

Changed November 21, 2012 09:12AM UTC by trac-o-bot comment:6

resolution: → invalid
status: pending → closed

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!