I am developing a one page website. I need a bootstrap "modal" class popup to show up when I click on a button. However the template I am using is done in Bootstrap Version 1. I need the "modal" popup to be in Bootstrap v3. Is there any way that I can make this specific part of the html body to use Bootstrap v3?
If I try to include the link reference to Bootstrap v3 at the top of the page the template gets messed up and unclean.
Please help....
Best solution, but not cross-browser
This is not supported by all browsers but you can use :
<style scoped>
#import url("bootstrap-3.css");
</style>
Put this in the modal container <div>.
Cross browser solution
Copy over the modal component from bootstrap 3 then remove the bootstrap 1 modal component (in the css).
Other cross browser solution
Rebuild your template on top of bootstrap-3.
I'm coding a responsive website and it is the first time that I'm using Facebook Comments tool. Everything is correct except when I access it on mobile.
Facebook Comments generates a new stylesheet for mobile. I'm looking for some code that disables or ignore this new stylesheet.
Screenshots...
- on desktop
- on mobile
You can add CSS of your own to over ride the FB css and make the comments box responsive. Just add this to your CSS
.fb-comments, .fb-comments iframe[style] {max-width: 100% !important;}
Got it! To disable the stylesheet for mobile, we must insert a new attribute (mobile="false") in HTML code.
<div class="facebook_comments">
<div class="fb-comments" data-href="http://example.com" data-mobile="false"></div>
</div>
Thanks a lot!
\o/
I'm using a Bootstrap modal dialog on my site (which works fine on desktop). When I try to use this function on iPhones and iPads, the modals do not work.
Is there a reason for this? Has anyone come up with a fix for this whilst using Bootstrap's CSS via #import?
I use the Bootstrap override file to make changes to the Bootstrap CSS.
I had the same problem these days and figured out, that safari on iOS is working differently to other browsers with respect to one thing. The modal window is not shown on safari but on many other browsers, when there is a href="#" missing.
not working on Safari/iOS but other browsers:
<li><a data-toggle="modal" data-target="#testModal">Modal</a></li>
working on Safari/iOS and other browsers:
<li>Modal</li>
The iPhone's browser doesn't seem to support the modal's "fade" transition. Disable it entirely from your modal dialog box, or if you want to get fancy, disable only when your site detects an iPhone device:
This doesn't work on the iPhone
<div class="modal hide fade" id="deleteConfirmation">
This does
<div class="modal hide" id="deleteConfirmation">
please check out http://jschr.github.com/bootstrap-modal/ as it fixes a bunch of the modal issues.. all you'll have to do is just include the 2 js files --
- bootstrap-modalmanager.js
- js/bootstrap-modal.js
and it just works
I know I'm a little late to this party but I was having the same problem and came across a solution that solved it. In case anyone else is having the same problem and finds this question doing a search here is the answer:
Add the class "clickable" to whatever you're tapping on with your iOS device that's supposed to open the modal. I assume you're using a div because an a tag or button should work just fine. Then in your CSS put this:
.clickable {
cursor:pointer;
}
This is not a Bootstrap problem, it's an iOS problem. The pointer lets iOS know that whatever you're tapping on is clickable, which normally doesn't include a div.
I won't take credit for this answer, I found it here:
Bootstrap Modal does not work on iOS devices
this is still an open issue on the Bootstrap Project:
https://github.com/twitter/bootstrap/issues/2130
This may be caused by incorrect dialog positioning. try playing with the "top" setting in the .modal class.
I had similar error on my mobile device (Android OS).
Modal works fine on desktop but on mobile doesn't work.
Problem was in my wrong definition of grid layout.
So, define .col-xs in any column of your layout, that worked for me.
I also had the same problem where my button to trigger Modal was not working on iPhone. I had to convert the <a> tag with Rails link_to and providing all possible attributes. ie.,
= link_to "Open Modal", '#', :remote => true, "data-backdrop" => "modal-backdrop", "data-toggle" => "modal", "data-target" => "#myModal"
Very easy, just add the an inline style, "cursor" to pointer and it will work straight away. style="cursor:pointer;"
<li><a data-toggle="modal" data-target="#testModal" style="cursor:pointer;">Modal</a></li>
If you're trying to display a modal during form submission, then you'll need to make sure the modal is activated before the submit event. This is because iOS Safari doesn't allow animations during form submission.
I was displaying my modal after jquery validation completed, which was too late. So instead I show the modal on button click, and dismiss it if jquery validation fails during the submit event.
On Diveboard, we made a nice hack of photoswipe to support videos
Everything went well until I discovered Firefox 11 and 12 beta are not playing the youtube videos embedded any more... it seems they are loaded, we can hear sound ad pufff no images... so it's youtube radio instead
you can see an example here : Video example page
And i've been scratching my head over and over on that one but I'm clueless :( :(
EDIT : Apparently it's an issue ONLY ON OSX!!! which makes me even more clueless...
Any hint would be apreciated
the iframe code is pretty straightforward:
<iframe width='#{width}' height='#{height}' src='http://www.youtube.com/embed/#{matchdata}?wmode=opaque&autoplay=1' frameborder='0' allowfullscreen></iframe>
What CSS styling are you using on your iframe? http://argylesocial.com used border-radius on youtube html5 iframes, and removing those style declarations resolved the problem.
I had to remove both -moz-border-radius and border-radius the get video to properly display. Works like a charm now!
It's actually a FF bug which is now fixed on mozilla 12 /13/14
http://ksso.net/~alex/ff_bug/moz-transform.html
I was getting the same issue on my website blog I am developing, I added height for the iframe as Firefox was not grabbing the height from the height tag in iframe, the solution is either add the height using style tag, but if its a responsive website use the media css for the iframe tags height. The example might explain it better.
If using a fixed height for the iframe then try adding style tag to the iframe as in
style="height:374px"
If responsive site the add the iframe to the media query in css - eg:
#media screen and (min-width: 100px) and (max-width:768px) {
.video iframe {height:200px}
}
and so on.
It worked for me, I hope it will helps others as well.
Thanks!
I'm having an issue with a dropdown menu in IE8. Everything looks OK on Firefox and Chrome but not in IE8, more precisely the text from the dropdown menu doesn't show up. What am I missing?
This is the website: http://stuffforyourdog.com/maxabiz/collegeadvisors/index.html
The problem is due to the use of Cufon plugin. I copied your html/css in jsfiddle and it works on all IE/Chrome/FF. http://jsfiddle.net/t6sqV/ I suggest dropping cufon, and use a service like Typekit instead: https://typekit.com/ . You can also use http://www.fontsquirrel.com/ to download fonts ready to be used using only CSS.
ps: be careful. hover on non link elements does not work for IE6.