Issues with Ext-JS 1.1 date fields and Firefox 3.x / IE 8 - extjs

100%I'm modifying an older website for a client that uses Ext-JS 1.1 and I'm having issues with display of date fields in IE and particularly Firefox. The site was left in a semi-implemented state previously, so there's not been a perceived problem before.
In Chrome and Safari everything looks fine and the datepicker drops down and displays correctly. However in Firefox the picker is displayed widened to cover the maximum scrollable brower width (very wide indeed), and in IE it's truncated to about two thirds of the width it should be.
I am somewhat uncertain that this is due to our css, but because Chrome and Safari work fine I think it might be a problem with Ext-js itself. I realise that this is an old version of Ext-JS, but because everything else works fine I don't want to go to the trouble of upgrading unless that would be very straightforward (but how difficult would that be?)
I don't myself use ExtJS and this is the only website my client has with it - so I'm really looking for the simplest possible solution.
EDIT:
Solved nearly as per bmoeskau's answer but changed
table.x-date-inner {
width: 100%;
table-layout:auto;
}
to
table.x-date-inner {
width: 200px;
table-layout:auto;
}
Which changes the previous width from 100% to a fixed px value which works on Firefox. The drop-down is still truncated in IE, but I can live with that and an instruction to my client that he'll need to upgrade the JS library to solve that one

This has to do with a change in how tables were rendered in FF 3.x compared to 2.x. You should be able to add this CSS fix anywhere after the Ext CSS (I think -- this is from memory since the Ext forums aren't loading at the moment):
table.x-date-inner {
table-layout: fixed;
}
You should inform your client that Ext 1.x has not been supported officially for quite some time, so other issues like this are likely to crop up as browsers progress forward.

Related

Chrome 53 Helper crashes (OSX)

I'm part of a web development team that is building websites using the Angular (1.x) framework. After a recent update to from Chrome 52 to Chrome 53, we've noticed one of our sites to become unresponsive.
The site in question is: https://www.slimnaarantwerpen.be/nl
The tab will become unresponsive when you resize the page (scale down, then scale back up) or when you toggle some of the map layers. (For example: Taxi) The Dev-tools are also unresponsive, so I'm unable to debug this issue...
This behaviour only occurs on Chrome 53.x.x on OSX. I've tested the above on Chrome 53.x.x on Windows and everything runs smoothly. Safari and Firefox also don't cause issues.
I can also confirm that this site runs correctly on Chrome 52.x.x, as I've run the site on that browser before updating to Chrome 53.x.x. I also used several testing laptops using 52 to confirm it's working, only to update them to 53 and notice the issue...
Does anyone have an idea if this is a common Chrome 53 issue? I read that changed some things under the hood to improve performance. What's the best way to contact Google regarding this issue?
The problem was that an element inside an ng-if had overflow: scroll in combination with height: 100% applied to it. Apparently, Chrome 53 (OSX) does not like that...
Removing either and changing the styling resolved this issue.
I hope they fix this soon, but in the meantime I hope this answer can help anyone who has a similar problem. :-)
EDIT: This issue also seems to be OSX 10.11-specific, as this does not happen on OSX 10.10.x

Google's PlusOne button ironically not showing in Chrome. Why?

I had this working before and I just noticed today that my plus one buttons are no longer showing on my pages. Inspecting them, I see they are at a top and left of -10000px. I certainly have no styles doing this. I see others reporting similar issues (usually years ago) but I've yet to find a solution that applies. (I've confirmed my pages have a link rel="canonical" tag. The page isn't https.)
It displays normally in IE, FF, but not chrome or opera.
A sample page is here.
Google's implementation page is here.
Pretty simple stuff really so I'm not sure what's going wrong. Any ideas?
edit: This css hack worked
/*fix for Google's f'ed up Google Plus button*/
#___plusone_0, #___plusone_0 iframe {
position:static !important;
width: 100px !important;
height: 20px !important;
}
But obviously I shouldn't have to rely on that. After digging and reading a bunch, I believe it is simply a bug with Google Chrome. Absolutely ridiculous that their own product doesn't work in only their browser.

How extjs is browser independent

I have heard that EXTJS is a browser independent javascript library. How does extjs make itself browser independent? When I open up the library classes, I do not see any code like :
if (IE)//do this;
else if (FF) // do something else;
Is my understanding correct that extjs is browser independent?
In addition to sha's point, I'm aware that ExtJS uses conditional checks for browser features and selects whether to use things like images, or css for particular visual effects.
Two examples of this would be that it manages to produce rounded corners on it's widgets in IE6 via images, but in anything which supports it, it will use 'border-radius' in CSS.
This is also true with gradients in widgets, which are rendered as images in older browsers, but use CSS3 gradients where supported.
As a rule, from what I've seen, ExtJS uses 'feature detection' to work out what your current browser supports and responds appropriately. A further example of this would be it's charting classes, which render as SVG if supported, or VML on older browsers.
There are some classes in ExtJS you can use to perform feature detection if you wish to do anything specific outside of it's in built in actions too. I'd imagine it uses these under the hood to make decisions about what to render.
That aside, it should be noted that every now and again, you can notice odd discrepancies between browser versions, usually annoying little visual effects, like a scrollbar being present in one browser an not in another, this could however just be a symptom of other code, but I know we've seen a few little quirks from time to time when testing accross IE8, IE9 and Chrome for example.
It is browser independent. As far as I know they have some different CSS definitions for different browsers. If you want to see is there any difference in the JS code you will have to look deeper - probably at some ExtJs core files.
We've been using it so far on IE, FF, Chrome, Safari, Mobile Safari etc.

Too Much Webkit, crashed mobile safari?

I appear to have uncovered a dilemma, and I wonder if anyone else knows about it. It would appear that significant use of webkit effects to replace JQUERY functions for CSS3 enabled browsers appears to crash mobile safari to the desktop.
Has anyone else encountered this problem / a solution for it. Or is it caused by someone else.
I'm encountering a similar problem. In my case, applying -webkit- tranforms or transitions on hundred's of dom elements causes mobile safari to crash on ios5. interestingly enough, when I test on an old iphone 3g, (ios3) mobile safari does not crash.
I know this has something to do with the -webkit- prefix, because I'm using SASS for the css, and commenting out the webkit line on my 'browser-prefix' mixin, which is responsible for adding the webkit prefix to all the css declarations, fixes the problem.
I've tried to override the webkit prefixs by setting all the -webkit- values to 'none' within media queries, but it seems that the crash happens even before the values get overridden.
I'm also certain that it has to do with the amount of DOM elements on the page, since this page with lots of elements crashes, http://dev.moovylist.com/jasiu
whereas this page with the same css, but less elements, does not crash.
http://dev.moovylist.com/suzy
My only solution thus far is to load a seperate webkitless stylesheet for the iphone, so that the iphone never sees the webkit prefixes.

internet explorer 6/7

I have recently developed a couple of websites for a local vets and car valeter which look fine in internet explorer 9 and firefox but when viewed in internet explorer 6 or 7 it just goes wrong
In the car valeting all the boxes move down so they do not run as i have placed them (this only happens in IE6 not 7
in the vets website there is a lot of whitespace at the bottom of quite a few pages before you reach the footer. I know IE6 and IE7 are outdated but I would still like to fix the errors if possible.
Thank you for your help.
Dont forget the doctype on the top of your html file, otherwise the browser will
work in quirks mode instead of compatibility mode. Might solve your issue. Also no one uses IE 6 anymore, do not bother
check your site with the w3c validator and fix qny errors nd warnings, besides that there isnt much you can do
A helpful approach would be to use frameworks for JavaScript (jQuery) and CSS (BluePrint) for cross browser compatibility. It will take time to migrate to new coding, but will be worth it.
On a side note, if you do not mind redirecting the users of IE 6/7 to a page suggesting they upgrade their browsers, then you may try something like this in your JS:
var browserVer=parseInt(navigator.appVersion);
var browserName=navigator.appName;
if((browserName=="Microsoft Internet Explorer" && browserVer<=6) || (browserName=="Netscape" && browserVer<=3))
window.location="Incompatible.html";
Where 'Incompatible' is the page where you want to redirect. Also if you use above as a function, make sure you call it:
<body onLoad=yourFunction()>

Resources