Bootstrap Modal disappearing in ipad - javascript

I am working on a website where I have used bootstrap modal. When I am testing my website in ipad modal gets opened but whenever i am trying to edit some thing within that pop-up modal, the modal pop-up disappearing but the modal backdrop is still there.
Can any one tell me why this is happening?
Thanks in advance.

different versions of iOS have sometimes undesirable behaviour when focussing on an input - natively it tries to center the input while bringing up the keyboard and seriously messes with the DOM if you have fixed or absolutely positioned elements being affected, if this is your problem then you could try cancelling the auto-focus behaviour - see this answer Twitter Bootstrap modal on mobile devices for possible solutions.

Related

HTML scrolling issue in dialogs on iOS

I'm developing a web application based on EmberJS, that should be running on multiple device types. The application includes dialogs, that are handled using the ember-modal-dialog and liquid-wormhole addons.
When opening the dialog on an iPhone, scrolling within the dialog eventually stops working, and instead of scrolling the content, some underlaying(?) elements are overlapping the dialogs content from the top or bottom (depending on the scroll direction). It's actually hard to explain, so I've made a video:
https://drive.google.com/file/d/12Xfvxvx89r91svEyybMf1j6HFD3v_Tkl/view
Also, you can try it yourself. Click on the following link, and then on the button of the first item on the page.
https://rkr9z8g.suitepad.io/category/6463/page/22280
Does anyone knows or have an idea, how to fix the problem?
I've got same problem in my project. But i found that some duplicate style on my div. Try remove overflow-y: scroll and add -webkit-overflow-scrolling: touch. Hope that helps.

Bootstrap tabs are greyed out when using browser back button

In my project I'm implemented solution for Bootstrap tabs to work with browser back button. I've do that using window popstate event. Everything works perfectly, but the tab you back out of stays grayed/selected. This is a CSS issue? or maybe this is handled by browser?

Android keyboard seems to toggle jquery .slideToggle, anyone know a fix?

I'm currently developing a site where I hide the header in mobile devices, it can be opened using a anchor with a jquery slideToggle function. Great stuff. Inside the header there's a search field and some other buttons.
However, when I focus the input on android and the virtual keyboard opens up my header closes. hiding the search field and everything else in it.
I have come to the conclusion that it is the keyboard that toggles this "bug".
Have anyone ever seen this before? I have no clue what I'm even looking for. Bloody android! :)
Thanks,
Robin
var searchToggle = $('.search-toggle'),
subHeader = $('.sub-header');
searchToggle.click(function(){
subHeader.slideToggle();
});
Problem solved. Found out that when the keyboard opens up the window trigger a resize function I used.

Giving a div two specific functions, one for mobile and one for desktop

For a current project that i am working i encountered a small issue.
I have a video that needs to be played in a lightbox on desktop, and on mobile to load directly from the source. I am currently building the website with wordpress and am using a shotcode plugin to display the lightbox with.
I guess i have to make a media specific call for mobile devices and let the specific div behave differently on mobile..
Can anybody give me some pointers and help or an example how i could possibly fix this?
Let's say you have a link to open the modal on desktop. This link can be hidden on mobile with the help of media-queries (i'm using some example classes here to illustrate the working):
Open video in modal window
The link shouldn't show up on mobile devices, since you want the content displayed right away. For the video you could use something like this:
<div class="hidden-on-desktop" id="modalWindow">Video here</div>
On the desktop this div should act like a hidden, modal window and on mobile it displays the content. You should style the modal window in a specific media-query since you don't want the content to be displayed like a modal on mobile devices.
Hope this helps a bit :)

Bootstrap's dropdowns close in less than a sec after pressing them (Android 4.2.1, stock browser)

There's a problem with Twitter Bootstrap's dropdown menus on mobile. If I use Android's stock browser and click on a menu, it will open and close in less than a sec without me doing anything else. The same thing happens if I press the dropdowns on the official Bootstrap site, so this has nothing to do with my code.
If you want to keep the dropdowns open and fix this, you have to tap them for a little bit longer, smth like 1 second. But obviously I'd like a simple tap to be enough.
Is this normal for Android's stock browser? In Firefox and Opera Mini dropdowns work just fine.
Thanks!
PS: no, I don't have any form inside dropdowns. Only links that work fine in other browsers.
This is an android browser thing. They handle links with dropdowns as both a hover and click. Other browser such as iOS handles menus with dropdowns as just the hover then another click to initiate the link.

Categories

Resources