I am working on MEAN stack with angular material design. After testing on chrome & firefox, every functionality including flex & offset etc is working perfect. but in internet explorer, nothing is working as it is supposed to.
My question is, how to make angular material compatible with IE 10 & IE 11?
Angular Material is targeted for all browsers with versions n-1; where n is the current browser version. IE 10 is no longer supported.
Edge seems to work well with material, but IE 11 still has some discrepancies. I get around these layout issues by simply adding a few CSS rules to elements that aren't displaying correctly while making sure they don't affect my Chrome / FF layouts.
Also the way you nest your divs; layout rows, input containers, etc, can have an undesirable effect in IE 11. Trial and error worked best for me.
It is best to avoid angular-material if your main targets are internet explorer, but instead use Angular-Materialize library which is a add-on (directives) library for http://materializecss.com/ that works pretty much with every modern browser.
As for Angular 5 you can uncomment imports in polyfills.ts to deal with IE.
Using Angular 8, I got the Angular Material Datepicker to work in IE by doing the following:
Removed everything that had to do with moment.js and the material moment adapter. (Uninstalled it)
Imported MatNativeDateModule in app.module.ts
Set the appearance attribute to "legacy" in the html, like this:
<mat-form-field appearance="legacy">
Related
I'm having a lot of trouble getting the JQuery Sortable functionality working on my Windows 8.1 device which is running ie11.
I had this working on an iPad through the TouchPunch library, but I've had no luck with the new Dell Tablet I'm working with.
I've ran the webapp through Chrome on the tablet, and the sortable functionality works very smoothly. Does anyone have any ideas how I can get it up and running on Internet Explorer 11?
I have tried pulling down various versions of Touch Punch on GitHub, some which attempt to deal with ie10, but I've found nothing that really works with ie11, so I would be glad for some pointers. If I run the [Jquery Sortable Demo][2] on the device, I am able to drag just about by holding to the left of the table row and pulling down at the right point, but this is in no way usable.
Ideally, jQuery mobile would include the sortable functions, but it does not.
***Just to be clear, if I go to the sortable example below on my tablet:
Jquery Sortable
then I can't really get the sort funcitonality to work.
To the above source code, I have added touchpunch library, and also added
-ms-touch-action: none;
to my #sortable class.
According to some online, this should fix the issue on ie10 and ie11, but I'm not seeing it make the remotest bit of difference.
Thanks!
Okay, there was a simple answer to this in the end, although it took me a long time to find it. I started by trying to intercept touch events and failing, which eventually led me to realise that I had added the site to Compatibility View (Settings -> Compatibility View Settings), where I also had checked "Display intranet sites in Compatibility View" and "Use Microsoft Compatibility lists").
I think this reverts to the site displaying in ie7 mode. Due to this, I think there are issues with the MS-touch commands being recognised, and so -ms-touch-action: none was having no effect.
To be clear, then, referencing touchpunch, whilst also using -ms-touch-action: none, should get the jQuery sortable functionality working in ie11 - just be sure to check your compatibility settings!
I currently have a fully working web app built in Flex 3.5/4 using java back end with Spring Framework using TomCat.
I need to migrate or convert this project into Flash Builder 4.6 to create a mobile iOS application and use the same SpringFramework with TomCat. How can i do this?
Do i just copy code over and adjust?
Do I export from flex 3.5/4 and import into flash builder 4.6 and adjust for mobile?
Is there a certain export feature that exports to mobile?
Do I have to change the code to mobile components by hand? Is there anything automated?
I have spent about 3 days trying to search and figure out specific detailed information on what to do, but oddly enough, I have not found anything that is helpful. I say it is ODD because Adobe claims that with Flash Builder 4.6 and 4.7, migrating to different platforms, will remove about 70% of the work with the latest Flash Builder. However, I have found no tutorials or steps on exactly what to do. I don't even know if the spring framework would work with TomCat for an iOS app.
Here's what I have found out through my research:
1. Migrating to mobile, I will have to change various code to use the mobile optimized components for performance.
What do I need to do?
EDIT: I even tried adding mx.swc to my library path just for testing purposes to make things easier for the migration/conversion and it still doesn't fix my error in Flash Builder 4.6 mobile project with mx:Application:
http://i.stack.imgur.com/dFdIk.jpg
Lots of things to cover; and I'm not sure where to start. First, I want to clarify that the browser based app you developed for a 72-ish dpi 15+ inch computer screen may not easily migrate to 3.5/4 inch iPhone or 9.7 inch iPad screen. Keeping that in mind
Do i just copy code over and adjust?
I would start there, yes. Even better if you move the 'shared' code into a library project so you can use it for your web app and your mobile project. Flex 3.5 does not formally have mobile support; so I would not expect great performance on a mobile device. You'll also have to add some "non-mobile optimized" libraries to the library path manually in a Flash Builder Mobile project. The MX.swc is probably the big one, as you already mentioned.
Do I export from flex 3.5/4 and import into flash builder 4.6 and adjust for mobile?
In Flash Builder 4.6 mobile projects are different than web projects. Most likely you'll want to move as much shared code as possible into a library project and then create a web project--for maintenance of your current application--and a mobile project for deployment to iOS and other mobile devices.
Is there a certain export feature that exports to mobile?
If you have created a Flash Builder Mobile project; then yes you can export to iOS, Android, or Blackberry.
Do I have to change the code to mobile components by hand? Is there anything automated?
Yes, you'll have to change code to mobile components by hand. That is if you are replacing a non-mobile optimized component with a mobile optimized one. However, if you are using a Spark Component [introduced in Flex 4], such as a List, then you can use the spark list with the default theme in the web project and a spark list with the mobile theme in your mobile project without any changes.
...Adobe claims that with Flash Builder 4.6 and 4.7, migrating to
different platforms, will remove about 70% of the work with the latest
Flash Builder.
I am not aware of such claims. But, I do believe that you can reuse a lot of code between mobile projects and non-mobile projects. It took me 3-4 months to build a mobile game using AIR/Flex. It took me less than a day to port the code to work in a web browser.
I don't even know if the spring framework would work with TomCat for
an iOS app.
If you want you're iOS app to make calls to a server, then yes it will work without issues.
If you want to deploy Tomcat and Spring onto an iOS device I would not expect that to work.
This question is a bit non-specific; but I tried to help. If that doesn't point you in a direction, then I may ask what have you tried and what problems have you run into?
I was trying some slider / drag-n-drop demos of JQuery Mobile, Kendo UI and other javascript frameworks, but none seem to work in the Metro version of IE10 on my tablet (running Windows 8 Consumer Preview).
I remember there was a similar issue on IOS, but using most frameworks it's now working on my iPad.
Does anyone know how to solve this problem?
Is there any JS framework that has addressed this issue?
Could this be something that is still to be fixed by Microsoft before final release of Win8?
Cheers,
Ray
Internet Explorer 10 has a more abstact event model when it comes to touch, mouse, or pen events. Rather than having events like touchstart or mousedown, Internet Explorer 10 has an arguably superior model consisting of a much simpler MSPointerDown which is fired for all types of inputs, including fingers, mice, or pens.
Unfortunately, as you've noticed, there isn't a great deal of support in popular libraries and frameworks, though I suspect there are a few good reasons why this is the case:
IE10 is still technically incomplete.
IE10 is currently not available on Windows 7 (though it will be released on Windows 7 eventually)
IE10 currently requires the installation of unfinalized versions of Windows 8
These reasons, among more I'm sure, have likely caused the developers behind major frameworks and libraries to hold off on any serious investment of their time to target the new browser from Microsoft. That being said, I do know personally of some very key players from the jQuery project who have been keeping a close eye on Microsoft's new pointer model. I suspect the same can be said for other teams.
The reason is that IE10 introduces MSPointerEvents, which are probably not well supported by most frameworks, at least yet.
Update: Kendo UI supports MSPointerEvents since Q3 2012. As of Q1 2013 all framework widgets also work properly in IE10 when content is pinch-zoomed.
Background info:
Over the past week, I have been messing around with Chrome extensions and had no problem creating my extension. Great, Chrome rocks for making the development process very easy to learn, and, well... just easy!
Now I have it in my mind that I'd like to create this extension for as many browsers as I can, so I decided on Firefox next.
What a mess! There documentation has done nothing but give me a headache and waste my time so far, VERY convoluted and just generally unorganized.
I have managed to locate a code sample for a simple extension that I think I can use as a starting point and have begun messing around with - fine...
I have learned that this sample extension will not work with anything less than Firefox 4, as it uses the bootstrap technique to make the extension installable without a browser restart. Ughhhhhh....
Now we arrive at my questions:
Is it possible to develop an extension for Firefox 7 that will work with previous versions of Firefox? I don't even care about anything prior to Firefox 4, if that's the cutoff point for restart-less installations. It would be nice to know that what I am spending all this time making will work consistently and for more than a week when the user is prompted to upgrade next.
How about the reverse? Can I create an extension that is compatible with Firefox 3.5 through Firefox 7? I realize it would require a restart to install, but that would be acceptable if it resulted in a working extension regardless of the version.
Can anyone with experience on this stuff share a bit of what I'm getting myself into here? It seems like this is a nightmare of a platform to develop on, and that I will be constantly fixing my extension.
One last piece of relevant information:
The extension I am developing is purely javascript based - this stuff should work (I think?) because it's dependent on just one feature "content scripts" that really shouldn't be changing in implementation between versions at this point... right?
So what exactly am I missing? How do you create easily manageable Firefox extensions that will work in all versions of the browser?
Thanks everyone! :)
You have to distinguish between "traditional" extensions and extensions built with the Add-on SDK. The former are far more powerful given that they have direct access to all APIs the browser uses - but that's also the reason why they are more complicated to write and why the documentation is rather unordered (there are simply very many things that you could do, far more than you could with Chrome). They are also more likely to break as the browser changes. The Add-on SDK on the other hand gives you a limited API much like Chrome. The Add-on SDK currently supports everything from Firefox 4 onwards (yes, because of restartless installation), with the promise that browser changes will merely require your add-on to be recompiled with a newer version of the Add-on SDK. In fact, that recompiling will likely happen automatically in future for add-ons hosted on addons.mozilla.org. On to your questions:
Is it possible to develop an extension for Firefox 7 that will work with previous versions of Firefox?
Sure it is. The Add-on SDK currently marks your add-on as compatible with anything between Firefox 4 Beta 7 and Firefox 8 Alpha 1. Even as traditional add-ons go - starting with Firefox 4 the differences between particular browser versions are rather small, most things work in all of them. You can also stay compatible with Firefox 3.x but depending on what you do it might require some effort. Important information:
Firefox 4 for developers
Firefox 5 for developers
Firefox 6 for developers
Firefox 7 for developers
How about the reverse? Can I create an extension that is compatible with Firefox 3.5 through Firefox 7?
It doesn't matter which way you go. I wouldn't recommend spending much time on Firefox 3.x support however. With Firefox 3.5 no longer supported the only relevant version is Firefox 3.6. According to the statistics of my add-ons roughly 18% of the Firefox users continue using it. In the next few months this percentage will get significantly smaller, especially when Mozilla announces end-of-life for this branch. So for a new add-on supporting it is usually not justified.
Can anyone with experience on this stuff share a bit of what I'm getting myself into here?
Depends on how complicated your add-on will be. Given that you are developing an equivalent to a Chrome extension, you will most likely be using the Add-on SDK which means that there won't be any compatibility problems. As traditional add-ons go, simple add-ons that don't rely on some obscure implementation details also typically don't have any trouble staying compatible (I have two add-ons that didn't need a single adjustment since Firefox 3.5). Add-ons that go deep down into the system are more problematic of course.
Is there a "BlackBerry UI" CSS/JS framework available for Blackberry - Similar to IUI for the iPhone?
Hosted over on Google Code http://code.google.com/p/iui/ there is a great open source library for providing a "standard" iPhone UI for web applications.
i.e. a JavaScript and CSS library to provide:
BlackBerry look and feel
Data Binding
Curved corners etc.
DOM utilities
Handle idiosyncrasies between browser versions
Considering the fact UI changes across blackberry hardware, I guess it's difficult to create the equivalent of what is found on iOS.
I'm referring you to this forum thread you already saw for sure: Is there a "BlackBerry UI" CSS/JS framework for BB's - Similar to IUI for the iPhone
In term of compatibility and usability, I guess slightly altering a jQuery Mobile's theme would be your best option if you want to find one that is open source (unlike Sencha for example).
BB OS 6 contains a modern Webkit browser so it's easier to use standard toolkits such as Sencha.
Besides using Jquery Mobile or Sencha, you could give a try to this (official it seems) library https://github.com/blackberry/bbUI.js
I would recommend against using jQuery Mobile on a BlackBerry app.
It's slow (especially on older/less powerful devices), bloated (lots of stuff you probably won't ever need), the UI doesn't align with BlackBerry guidelines whatsoever and it doesn't play well with focus-based navigation (which is important as some current devices still don't have a touch screen and some users prefer to navigate with the trackpad).
bbUI.js (https://github.com/tneil/bbUI.js) as mentioned by Max is an official library originally developed by someone at RIM and, while it's not without its flaws and limitations, after months of working on a large WebWorks project it is still the best choice I've found to get up and running quickly.
Alas, the OS 6 browser crashes at the mere hint of javascript load (most usually the case), slightly less from having too many tabs open (by "too many", the amouny ranges between two on the lower spec models like 9300 to 4 or 5 on the 9780). This is from my experiences. Perhaps my settings are wrong - I tend to like smaller text, Arial and set the encoding to UTF-8.
However, I have never had Opera crash on the same phones - despite having at least 5 to 10 tabs open and in the background.