If you open a dialog when a dialog is already displayed then, by default, the second dialog will not expand past the width of the first dialog. This is true even though the second dialog is not actually enclosed within the first dialog (I get the second dialog by clicking a link in the first dialog).
I can set an explicit width on the second dialog, but this isn't ideal. I really want it to auto-size to its contents (the quasipartikel multiselect), which are wider than the first/background dialog. With an explicit width on the second dialog I generally get two sets of scroll bars: one on the dialog itself, and on on the inner multiselect.
Note that I've only tried sizing the second dialog using an explicit width in the JS .dialog() call, and not via css (which I know almost nothing about).
Does anyone have any idea how to auto-size the second dialog? Thanks.
EDIT
Some code added as suggested:
<div id="dialog-top" title="Tab data">
<form>
...lots of stuff, including id 'addCodeButton', which
...pops up the second dialog
</form>
</div> <!-- dialog-top -->
<div id="dialog-add-code" title="Code selector">
<select id = "codes" ...etc... >
...
</select>
</div>
$(function(){
$('#addCodeButton').click(function(){
// problem: this 'open' will not set the width of the new dialog
// wider than 'dialog-top' unless an explicit width is given
// (see '460' below)
$('#dialog-add-code').dialog('open');
return false;
});
});
var $dialog = $("#dialog-top").dialog({
autoOpen: false,
modal: true,
buttons: {
...
}
});
$('#dialog-add-code').dialog({
autoOpen: false,
width: 460,
modal: false,
buttons: {
...
}
});
I'm not sure what's causing your problem. Here's fiddle demonstrating that what you want does work.
http://jsfiddle.net/brettzink/NASyR/
you tried .dialog({width:"auto"}); ?
Related
I'm using jquery mobile 1.4.5. In some instances, I generate a pop-up when a user clicks a link and fill that popup with the results of an ajax call. The generated code taken from firebug after the ajax call returns looks like:
<div id="detailsPopup-popup" class="ui-popup-container ui-popup-active" tabindex="0" style="max-width: 1250px; top: 68.9967px; left: 146px;">
<div id="detailsPopup" class="ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all" data-role="popup" style="width: 971.538px;"><a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" data-iconpos="notext" data-icon="delete" data-theme="a" data-role="button" data-rel="back" href="#">Close</a>
<div data-theme="a" data-role="header">
...content...
</div>
</div>
</div>
The popup is showing up fine. I'd say 90% of the time, when i click the close button, the popup closes. However, 10% of the time it just sits there. Usually it'll highlight the close button as blue, indicating it is active or something but the window itself stays open. If I click around in the popup box a few times and keep trying, it will eventually close, but it is extremely frustrating and user unfriendly.
I'm not sure why it doesn't work that small fraction of the time? I've included a screenshot of what the modal looks like. I don't know if the parent div (the blue outline) is somehow covering half of the button and so that is catching the clicks sometimes?
any thoughts as to what is going on here? I've only been able to try in android/chrome and not an iphone, so i don't know if it is browser specific.
Thanks!
edit: adding javascript code that parses ajax response and generates window. NOTE: i know i'm putting everything in the header div right now (for padding purposes), however I don't think that's causing the issue. I stripped out a lot of the contents of the window for brevity.
function showPopup(jsonResponse){
// parse json response
var obj = jQuery.parseJSON( jsonResponse );
// close button
var closeBtn = $('Close').button();
// start to construct window contents from response
var content = "<div data-role=\"header\" data-theme=\"a\">";
content += '<table border="0" style="width:100%"><tr>';
content += '<td style="vertical-align:top;">';
content += '<a data-ajax="false" href="show.php?id='+obj.id+'"><img src="'+obj.pic+'" style=\"max-height: 2em;\"></a><br><b>'+obj.title+'</b></div>';
content += '</td></tr></table>';
// close header div
content += '</div>';
// Popup body - set width is optional - append button and Ajax msg (was 1.5 width originally)
var popup = $("<div/>", {
"id": "detailsPopup",
"data-role": "popup",
"class": "ui-content"
}).css({
"width": $(window).width() / 1.3 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$(".ui-page-active").append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("#detailsPopup").on("popupafterclose", function () {
$(this).remove();
}).on("popupafteropen", function () {
$(this).popup("reposition", {
"positionTo": "window"
//x: 150,
//y: 200
});
}).popup({
"dismissible": false,
"history": false,
"theme": "a",
"overlayTheme": "b",
"class" : "ui-content"
}).popup("open");
} // end showPopup
ok, so i finally figured it out. was 100% my fault (as expected). i was overriding some default JQM css, and of course it caused the error. on another part of the page i had to try to fit 3 buttons on the same row, and had used the following to do it.
.ui-btn{
font-size:12px;
}
(originally: 1em)
That shrunk the buttons enough to fit that other requirement, but that also caused the close button to not show properly (as you can see below it was missing the outer border). Thus, I'm guessing it was just a weird offset/padding/etc error caused by the differing font-size that was the reason behind the clicks not registering or being handled properly.
(insert advice to never override jqm css)
thanks!
I'm using Jquery Ui to make a dialog using the following options:
$("#locations-dialog").dialog({
autoOpen: false,
title: '<input type="text" id="location-name" value="New Location">',
draggable: false,
modal: false,
closeOnEscape: true,
width: 660,
height: 515,
});
As it is visible I'm using an input field as a title.
The issue I'm having is that when I click on top of it nothing happens meaning I can't edit the text.
Don't know if I'm doing anything wrong...but in the jquery ui says:
Any valid HTML may be set as the title
As others have said, that's because the dialog widget disables selection for all the elements in its title bar, even if the draggable option is set to false.
You can add the text box to the title bar after the dialog widget is created, as the answer to the duplicate question suggests, or you can call enableSelection() to re-enable selection on the title bar elements:
$("#locations-dialog").dialog("widget")
.find(".ui-dialog-titlebar")
.find("*").andSelf()
.enableSelection();
The binding of the dialog box is what is causing issue. See this URL for full explanation and a work around example.
jQuery UI Dialog - Input textbox in the titlebar is disabled?
Here is code:
<script type="text/javascript">
$(function(){
var dialogOptions = {
title: "Header",
autoOpen: false,
modal: true,
width: 400,
height: 1000
};
$(".wnd").dialog(dialogOptions);
$("#btn").click(function(){ $(".wnd").dialog("open"); });
});
</script>
<style>
.wnd {background:yellow;height:900px;width:300px;}
</style>
<div class="wnd"></div>
<button id="btn">click me</button>
When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).
But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.
Here is demo on jsfiddle.
How to activate that side slider?
Thanks!
A clean solution would be like this one:
http://jsfiddle.net/4fc33/6/
What I'm doing is wraping the jQuery UI overlay create method to turn off the event that prevents scrolling to work correctly.
An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.
At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.
Here's what worked:
$("#dialog").dialog({
modal: true,
width: "auto",
height: "auto"
/* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);
I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.
* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.
I have a long list of links which bring up different jQuery dialogs. When I scroll down to near the bottom of the page and click a link, it successfully opens my jQuery dialog but the dialog is not visible because the page has scrolled up to the top of the web page -- the dialog shows up below the fold and the user has to scroll back down to see the dialog.
What I want is for the dialog to popup and be visible no matter how far down the page the link is.
Here is my simple dialog jQuery code:
$(function () {
$('#dlg').dialog({
autoOpen: false,
height: 460,
width: 680,
modal: true,
position: 'center'
});
$('.vidlink').click(function(e) {
$('#dlg').dialog('open');
});
});
You can see how it happens on this page:
http://www.ourlaughingplace.com/asp/park.aspx?step=3&locID=WDW&parkID=MGM&DLRparkID=MGM#
Scroll down to "Movie Clips" and click on "Fantasmic Finale" using IE9, if you scroll back down you see that the dialog opened just the way it should -- it just came out below the fold.
I've tried setting the dialog position to 'center' and 'top' but still have same problem.
The value # for the href of the links correspond to the top of the document. With your current code, clicking on the link works as expected: the page is scrolled back to the top.
Either prevent default behavior of the <a> tags that opens the dialog:
$('.vidlink').click(function(e) {
e.preventDefault();
$('#dlg').dialog('open');
});
Or change the href value of those tags to:
I create modal dialog with form inside it (with some text input).
And I just can't enter the text inside the textbox. Dialog blocks keyboard input.
Here is my simplified example:
<div id="modal-dialog">
<label for="my-text">TRY to input text...</label>
<textarea id="my-text" style="position:relative; z-index:1"></textarea>
</div>
<script type="text/javascript">
var dialog = $('#modal-dialog').dialog({ modal: true });
</script>
Note: You may ask - why did I mentioned about "position:relative; z-index:1"? Because it works fine without it. But I can't remove it because of design.
Note: not modal dialog works fine too.
I'm using jQuery 1.6.2 + jQuery UI 1.8.14
The z-index is the problem. Here is an exemple ( http://jsfiddle.net/c3BPP/ ) of your code with a bigger z-index and it works.
You can also lower the z-index of the JQuery dialog:
var dialog = $('#modal-dialog').dialog({
modal: true,
zIndex: 500
});
By default, it is 1000. Of course your relative or absolute positioned elements needing text input need to be greater than the z-index of the dialog still.
I found that the <form> tag in my dialog was getting a z-index of 1, preventing any of the controls from working. Instead of changing the z-index for each control, simply changing the z-index of the <form> tag to 1010 (a value higher than the default of the dialog) worked for me.
Adding tabindex="-1" helped me resolve this problem.
Here's an example:
<div class="modal fade" tabindex="-1" id="error" role="dialog">