Opened 10 years ago
Closed 10 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> </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 10 years ago by
Owner: | set to arrie1992 |
---|---|
Status: | new → pending |
comment:2 Changed 10 years ago by
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
comment:3 Changed 10 years ago by
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.
comment:4 Changed 10 years ago by
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 10 years ago by
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.
comment:6 Changed 10 years ago by
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!
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/.