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!
Related
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!
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.
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.
I’m having problems getting MiniProfiler to show me the reports. I’m just in the Dev environment, which should show it all the time. Adding ?pp=help does bring up the help page. In tmp/miniprofile, there are a ton of mp_timers_ files. Apparently something is happening back there.
At first I thought it was a weird CSS issue, like my navigation bar is covering it. I tried loading the page without CSS and the MiniProfile box still doesn’t show up.
In case it matters, I do not have a before_filter set up. When I use the simple one from their docs, though, it doesn't help anything.
My first thought is that it is disabled by default. If that is the case you will not be able to see the help page. From what you described it seams to be working. So my solutions is to type this into the browser and see what happens.
http://localhost:3000/?pp=enable
after that you should be able to get to help page.
http://localhost:3000/?pp=help
I know this is very late, but another potential issue that may cause this problem is JS errors.
If there are any unresolved JS errors, the badge likely won't show up.
So make sure to squash those before pulling your hair out.
I didn't have it show up either due to having an old version of the gem without the currently needed initializer.
To fix it, I just ran the generator which added an initializer to set up rack-mini-profiler in development:
bundle exec rails g rack_profiler:install
MiniProfiler can also be set hidden by default
# config/initializers/mini_profiler.rb
Rack::MiniProfiler.config.start_hidden = true
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.