Bootstrap 3.1.1 with iOS Emulator - ios

In my site I used Bootstrap 3.0.2. All is working pretty great both on desktop and in my iOS emulator, where I test it for iPhone users.
However, when I tried to changed to Bootstrap 3.1.1, I can't seem to click on anything in my Web App (not links, not buttons, etc.). The site with 3.1.1 works pretty good on my desktop (with safari).
Any thoughts on why this happens?
Update:
Did a little debugging, and the problem seems to be with this line I use:
$('.modal-backdrop').remove();
This is a hack I use to clear a modal that .modal('hide') didn't take care of for some reason. Can anyone think of why this makes the iOS stop responding to clicks?
Thanks

As it turns out, iOS has a problem with "modal fade", so I just changed it to "modal".
This is probably not effecting bootstrap before 3.0.3, but when I changed it, the remove probably made the touch disabled somehow.
Works now.

Related

Rails Bootstrap 4 bug

I have experienced a small bug using Bootstrap in my Rails application. If you go to the page using a cellphone or resizing the window to use the collapsed menu, it works corretly. But, when you go to another page (About or Contact) and use the collapsed menu, open it and try to close it, it remains open.
https://jgprod.herokuapp.com/home
Have you experienced this before? Thanks for reading!
I solved this issue by installing the gem of bootstrap in my rails app!

Rails BestInPlace Does it work with mobile?

Dearest stackians, I've launched my app and best_in_place works great on my computer however it doesn't seem to load at all on my phone(iphone 6). Is it not compatible with safari? I couldn't find anything about mobile compatibility in the docs anywhere and am about to switch to X-editable to give that a shot instead since it will need to be used on mobile. If anyone happens to know I'd appreciate it!
I know the question is old, but I just had the same problem and I assume others will have it in future, too. A quick fix for me was adding the following code in application.js
$(document).ready(function() {
$(".best_in_place").on("click",function(){});
});
Seems weird but works!

Seer working in everything but latest IE browsers

I'm maintaining an old rails 2.x app that is slated for retirement after this summer.
It uses the Seer gem to create a simple barchart and has always worked like a champ in every browser.
Now, however, it won't work in the most recent versions of IE. The code itself hasn't changed in two years. It works in every other browser.
It WILL work in IE in compatibility mode. The javascript is sent to the browser but the browser won't render it.
Seer is an old gem and this is an old app....I understand this is a bit of a hail mary.
Anyone else run into this problem? I would post the code but I believe this is one of those questions that will either be instantly recognizable to someone if they've seen it before.
Thanks!
EDIT: the gist of the js is here: https://gist.github.com/crowell256aa/9200487
That gem uses the old and deprecated "barchart" package for drawing charts. Since that package predates the arrival of IE9, I suspect that it is trying to create VML code in IE 9+, which is probably the cause of the code not working. The fix for this is to use the modern "corechart" package instead.

Twitter Bootstrap displays strange on local machine, fine in production

I've got a strange problem. My rails app looks fine in prod, but I recently started working on it on a different computer, and the front page seems to have forgotten about it's margins. When I commit everything and push it out to production, there are no problems.
I'm using twitter-bootstrap-rails and have not customized the stylesheets at all.
This picture has everything crammed against the left side of the browser, on my local machine
This picture shows production, where everything is properly aligned
This could be due to the mode you are running the server. My guess is that you will see the difference when you run rails s development vs rails s production.
I ran into this before, and it was an issue where my CSS was compiling incorrectly because I had some bad CSS floating around.
It can be pretty insidious to track down, so first look through your assets hierarchy and look for anything that is out of place. After that, you'll have to investigate using a browser and inspection tools like through Chrome.
Had similar issues with the fixed header bar which lost it's style. Looks like it was the update to the twitter-bootstrap-rails gem from 2.0.3, which I was using to the new 2.1.6.
With the update I then got an error about twitter-bootstrap-rails v2.1.6 break with error "rails app: method_missing': undefined methodless'
There has been a lot of discussion on the twitter-bootstrap-rails issue list: see v2.1.6 breaks app which explains a lot of the revised Gemfile configurations.
So far applying the suggestions hasn't resolved my issue of the header bar, which was dark, as per the Twitter Bootstrap examples, now appearing with a grey background like the LH nav bar. Suspect that it's something to do with the less compiling or linking of the assets.
I'm not sure exactly what the problem was still, but once I linked the app to Pow on my Mac everything displays normally. Strange. Anyway, I'm not having a problem anymore.

Jquery mobile with phonegap is not styling properly for mobile app

I'd like to say that I solved the problem but I wanted post this here as a reference if anyone else is having the same problem.
I've been following this tutorial: http://wiki.phonegap.com/w/page/41524872/JQuery%20Mobile%20Tutorial%20(iOS)
to incorporate jquery mobile into my application. I am using the latest jquery library which is 1.7.2.
I can't get the outcome shown in the tutorial. Styling, behaviour, nothing works properly.
I've been smashing my head off of my desk for 6 hours trying to get this stuff to work and finally resolved it with the following combinations;
used;
cordova-1.6.0.js (with the associated script declarations in the header)
jquery.mobile-1.1.0.css
jquery-1.6.4.min.js
jquery.mobile-1.1.0.js
it was a very frustrating morning. thanks for pushing me into the right direction.
Turns out jquery mobile doesn't support the newest jquery library.
As soon as starting to use jquery 1.6.1, everything started to look and behave as shown in the tutorial. Why it is not compatible with an older version is beyond me. I probably should've followed the tutorial step by step but honestly, I thought newer versions of jquery are supposed to be better and backwards compatible.

Resources