I am using Bootstrap in my MVC 5 application. The problem is that it works well on Firefox 35 an above but the UI gets disturbed when I open on IE 9 and IE 10.
Also, button colors that I am using appear as white on IE.
I want to make the application compatible to all the browsers.
Is this the problem with Bootstrap or CSS? What changes to make to make site work well on all browsers?
You can check the Browser and device support for bootstrap for supported and not supported features.
Additionaly Wall of browser bugs for some more information of known browser bugs.
Related
I was all excited over Polymer and starting developing a web app. I soon found out that Firefox fails loading the site correctly, see this SO post for details:
Polymer: Layout screwed up in Firefox, fine in Chrome
Then, I downloaded the latest version of Chrome on an iPhone 4 (iOS7) and the same thing for iPhone 6 (iOS8) and tried the website. I see the same errors as I see on Firefix (please see the link above).
In other words - going to my Polymer based website using Chrome for iOS fails just as bad as Firefox fails.
So, I'd just like to confirm that this is the case: Polymer does not work on iOS (no support in Safari, no support in Chrome for iOS). Correct?
As I also noted in my other SO question linked above, I was expecting it to work in all browser due to "polyfill", but that doesnt seem to help.
Am I missing something? =)
Note: Using Chrome for Android works fine, no errors there.
As I mentioned in the other thread, it's impossible to polyfill CSS scoping. Chrome on iOS is not actually Chrome, it's built using the iOS WebView (an old one at that), meaning there's no native Shadow DOM and no CSS scoping. The Shadow DOM polyfill does properly wrap DOM API methods like querySelector and getElementById, so you do get limited encapsulation, in that respect. But for CSS, the only thing the polyfill can do is rename your selectors, so :host .blah gets renamed to x-foo .blah and appended to a style tag in the head. It means you need to still write defensive CSS (as you do today) and avoid very loose selectors because they will be applied.
I experienced something very weird today and maybe it might help you.
My firefox was rendering as if polyfills didn't existed.So i went back to false on about:config dom.webcomponents.enabled and it came back to life.
Why? no clue.It worked, so, if you have dom.webcomponents.enabled true on firefox about:config might as well give it a try. IMHO looks like a polyfill bug on capable (yet buggy and poorly supported) web components browsers. worth a try.
I am using jqplot charting library to draw the chart in my ASP.NET MVC application.Inside the div element, rendering the chart.I am trying to convert the div element as image, export to pdf document.
For IE 9 and later, jqplotToImageElem() method [support canvas browsers only] is working fine and able to export.
For IE 7 & 8 it is not working as expected, since it is using excanvas.js to render the chart.
Is there any workaround to implement this for IE 7 & 8 browsers?
For IE<9 users you have multiple possibilities:
Use node.js on the server to generate your jqplot image and then let them download that image off the server.
Require that they install Google Chrome Frame which will works within IE<9 to give it modern capabilities like canvas. See: https://developers.google.com/chrome/chrome-frame/
Since jqPlot evidently works but doesn't print in IE<9, just have those users print using a screen capture program.
Microsoft recently realized that their non-modern IE's were a liability to the web and has begun auto-updating older IE users to modern versions of IE (See: http://www.paulirish.com/2012/the-skinny-on-ies-update-policy/). So as #amhed suggests, you could require that your users "get with the program" and update to at least IE9. Alternatively, update to Chrome, Firefox, any-modern-browser.
There would be very few clients you couldn't service with #1-4 (but we're looking at you "certain banking institutions" who run on XP and for security reasons & disallow browser upgrades). But for those few clients, you might have to use a GDI-based charting program rather that jqplot.
I am using jqueryui autocomplete and it works great on desktop and most of the mobile devices - ipad, iphone ,etc. However on blackberry 5, when I type in pis for the first time it shows the suggestions list immediately. when I break see the list and type in additional letter, I dont see the suggestions anymore. I change the text, do whatever and no suggestions until I reload the page and it repeats the same issue again. Should I do anything different with BB5? Thanks
What version of jQuery UI are you using? Blackberry 5 only has limited support for JavaScript 1.6 and this may be why your implementation is functioning oddly. It may be that there is nothing you can do to fix it for BB5 users.
I'm developing an application in ipad that requires a word processor functionality and since uitextview is very limited I want to use tinymce or ckeditor especially with iOS 5 being released. However when I try to load these api's index.html page in a uiwebview, the toolbar items don't show up (copy, paste, bold, ...) and the text has all the tags shown. Do I have to edit something in the index.html page or do I have to modify the javascripts or other files for it to work with uiwebview? Thank you.
I've tested the latest TinyMCE Full Feature demo on an iPad running iOS5 and Safari and found no problems.
As I understand it earlier versions didn't recognise Safari on iOS as a supported platform so it may be possible you are using one of those.
I just updated the jQuery Mobile version of our client book-in page to the latest 1.0a4.1 and I need some help debugging a window sizing issue off-site (I'm not on location).
The page runs on an iPad at the store so clients can book in their own cases. However, the page is being displayed like it's on an iPhone with huge lettering. "Emulating" with Ripple shows everything as it should, though.
I can't debug it from here and I'm not using any other CSS besides the base 1.0a4.1 stylesheets. How do I force jQuery Mobile to display the page as if on an iPad?
Here is a screenshot sent by the store clerk:
I didn't have the time to test it or try the fix, so it's still a guess, but at least based on your code inspection ;)
ok, so you put a meta viewport in your page and JQM also pops in a little
<meta content="width=device-width,minimum-scale=1,maximum-scale=1" name="viewport">.
As I said - I didn't test it, but I expect a collision. I have read somewhere that JQM was supposed to stop putting those metatags there... Try fiddling with that metatag a bit.
Also - see if the alpha4 or 4.1 release notes (on the blog) say something about viewports.
Running Media Queries