I have a google autocomplete on a modal and is working (Like this example) but I have an issue. The modal jquery plugin that I'm using set overflow hidden to "html" when opened and if modal height is greater then document height the scroll that appears is from overlay (or backdrop whatever you call it). When autocomplete appears I think they are appended to html, so when I scroll modal the autocomplete stay fixed, looks like they are being appended to html.
The same happens with Jquery UI Autocomplete, but they have an option called "appendTo", and I just point it to a div inside modal and works perfectly.
I would to know if Google Place Autocomplete have an option like that.
When I scroll
I just faced this issue. I working around the problem. I will hide the scrollbars when the focus is in the input field and show the scroll bars when the focus is lost from the input field. So the user cannot scroll around when they are choosing
Related
On my website I am creating a dialog. When this dialog is visible I want to create a focus trap so the user is tabbing inside this dialog until the dialog is closed. I am able to set the tabindex of all items on my page to -1 so they can't be focussed.
But I have one problem. I have an iframe with a webform inside it. The field and submit button inside this iframe are still focusable after I've run my tabindex script. I know this is how it should work (I shouldn't be able to change iframes content) but how can I make sure these items are not focusable when the dialog is visible?
For now I just hide the form (display:none) when the dialog is visible and this is an okay option. But I have the feeling there is a better way and since I'm learning about accessibility I'm curious about what solutions there are for this problem.
Thanks in advance
I have an online form, that i would like to do through stacking modal windows (it just makes sense that way). upon opening both modal windows and then closing the top most one however the scroll bar comes back up from the content bellow the modal window.
here is an example:
http://www.bootply.com/FGNRPwSRgH
Just look on the right side of the screen when closing the second window.
Is there anything I can do about this? I am new to Bootstrap and I am hoping to be able to fix this through CSS and bootstrap only, however javascript isn't out of the question.
When you open your first modal, The body tag of the iframe is getting a class of "modal-open" which is disabling the scrolling, that remains when you open the second modal. When you close that second modal, the "modal-open" class is being removed, which is why the scrolling is coming back. This is probably due to the way you're nesting these modals. It just wants to remove that class from body, not knowing that you still have one open. You will most likely need to add some sort of check step with javascript to determine if you still have a modal with a display property of block when closing each one, and if so make sure that modal-open class is still set on the body. I would look for a callback function on the close of those modals that you can listen for.
http://www.bootply.com/8K2wKO0c7I
$('body').append(
$('<script />',{src:'//rawgit.com/sbreiler/bootstrap-multi-modals/master/bootstrap-multi-modals.js'})
);
If it works for you, grab a copy of the *.js file from my github: https://github.com/sbreiler/bootstrap-multi-modals
In my GWT application I use a DialogBox like this:
DialogBox dialog = new DialogBox(autoHide, true);
dialog.setText("Hello GWT DialogBox");
dialog.setGlassEnabled(true);
dialog.center();
dialog.show();
My whole page is very long and it scrolls vertically.
This works fine, the dialog pops up and the rest of the page is darkened. When scrolling (with mouse wheel) outside the dialog box nothing happens, which is fine. But when scrolling inside of the dialog box, the whole page scrolls away including the dialog box itself. This feels very wrong.
It is even possible to use scrolling inside the dialog box to scroll the dialog box out of the visible area and then there is no way to scroll it back, because scrolling outside of the dialog box does not do anything.
How to prevent the page from scrolling when using the mouse wheel inside the dialog box?
dialog.setModal(true);
might work. This discards all the events that do not affect the DialogBox, aka scroll that is affecting the underlying page.
WAIT NEVER MIND, DOESN'T WORK
The Page will still scroll if the mouse is within the DialogBox.
Found this though:
https://www.mail-archive.com/google-web-toolkit#googlegroups.com/msg62527.html
Might be useful.
I added a Like button to a friend's website. In all browsers (IE7-8-9, Firefox 6, Chrome), if a visitor is logged into their FB account, a box with a scroll bar appears next to the Like button and remains visible. It's hard to see what is in the box, but it appears to be my own Facebook page. Can this box be removed or a setting changed so it doesn't show?
The login button actually has a different state when you're logged in. I'm going to assume that you've set the size of the button div via CSS. If you've done that, then you'll get that effect. Play with the width/height values of the container.
I want to position a modal box (position: absolute) out of browser, but I can't get it work.
It would be cool to position modal box on secondary monitor (if user has one, of course).
Hey, this one keeps me frustrating :/
You can't do this. Just about the only way to display content outside of the browser window area is with the Javascript window.open() method, though note that this method will probably be blocked by the user's popup blocker unless it's triggered by a user action (like clicking a link).