When a modal dialog box is open in iFrame, intially I can't focus a textbox in parent frame. The text box gets focused/selected and the looses focus right away. When I click (right or left click) on the content of modal dialog box, then I can select/focus the text box in parent frame. The same thing happens with drop down menu, it closes right away.
I've tried jquery trigger and parent.foucs but neither worked, is there something similar I can do programmatically?
I'm using dojo framework but I'm thinking its more of a html issue.
Any help is greatly appreciated.
Thanks
figured it out. Had to set autofocus="false" for dialog setup. It's a framework specific solution.
Related
I have created one page, in which on right clicking on some button a modal appears.
When I right click on the modal it doesn't seem to work.
So far, what I got to know is, the mouse click is taken by the UI control which comes underneath that modal and listening to all mouse events and that UI control VNC.
I can click on the part of the modal, which is not above that control.
Is there any way I can force modal to take all mouse events when in focus?
What I want to do is just right click and copy the text from that modal.
Thanks in advance,
Regards,
Ganesh
Just called RFB's _rfb.get_keyboard().ungrab() method when modal is shown and was pretty done.
I'm using AngularJS with UI Bootstrap to display a form in a modal dialog. However, any input loses focus when the scroll bar is clicked.
This happens if the scroll bar is associated with a div or with the window.
If the text input was not inside a modal then it maintains focus during scroll.
An example can be found at http://plnkr.co/edit/uaXiT1NedWjUm2DOKyrD?p=preview
There is nothing special about the input, it's as simple as can be
<input type="text" id="textinput" name="textinput"/>
Is there a way to maintain focus whilst the user scrolls?
Thanks
Chris
It's not losing focus when you scroll, it's losing focus when you click on the scrollbar. If you have a mouse wheel, for example, you can scroll the modal content without losing focus.
Basically clicking on the scrollbar is the same as clicking anywhere else on the modal that isn't in your input field.
It is true that some scrollbars won't do this (at least in Chrome). I don't know what the difference is. I have confirmed that it happens on anything set to overflow-y: auto or scroll, at least. It's not related to AngularJS.
Click on the Contact Us button and see it happen in pure Bootstrap: http://www.bootply.com/8R8QWNO6Qv
I don't expect there will be an easy solution for you to prevent this that doesn't involve tracking where focus is and such; and that will be quite complicated on multi-input forms.
I have the following problem:
I have an extjs menu in one iframe, and when i click outside this iframe the menu does not collapse, like it does when I click away in the same iframe the menu belongs to.
Do you guys have an idea on how to solve this issue?
This actually happens to any component that should hide when it loses focus. So, I'd love to see a more general solution, if you guys happen to know.
Thanks!
P.S.: I'm using version 3.2
While I don't know if your parent frame is also running a ExtJS application, you are likely going to need to utilize XDM (cross-domain messaging). https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
You would then need to add a listener on the parent frame for clicks within the window, and pass that click event to the iframe. The iframe would then handle the click as needed, which in your case is dismissing the menu.
For anyone still looking for a solution on this one.
You can address the Extjs menu and hide all open menus from the parent frame like this (fe inside a click event on the parent):
var menu = window.frames[0].[ExtApplicationName].app.getController('[CONTROLLER]').getMenu().items.items
Next, you can loop through the menu items and hide them by doing:
menu[i].menu.hide();
I have a form using Qtip2 and if the user submits the form with invalid values, the qTips fire correctly (so far so good). However, say the user wants clicks on a button that triggers the modal window to appear, the modal window appears above the form but below the qtips. So, I'm thinking, just give the Modal window a higher z-index value.
Modal Example with qTip
Has anyone else run across this behavior and what did you do to resolve it?
The lastest version of bootstrap shows the modal has a z-index of 1050. I believe the default z-index of qTip2 is 15001, and goes higher from there. You would have to up the z-index of the modal.
Edited: Removed incorrect information.
I'm having significant trouble with a jquery dialog box that opens in response to a .hover() command, and closes upon leaving the hover (which of course takes two functions).
When the dialog box opens a little bit out of the page, the entire page scrolls up; I want to disable this but I can't figure out how.
I have tried:
using event.preventDefault()
putting the ui-dialog css as 'position: relative'
setting the scroll bar back where it was (but this looks terrible)
Any other ideas?
Edit: Here is the code in jsfiddle: http://jsfiddle.net/TzUf3/1
Make sure the popup has its position fixed, then set the body to overflow:hidden;
When the dialogue is closed remove the overflow attribute.