[1.1.1/2.0a1] Safari 3 Win: Combobox in toolbar example

[Condor70]

Small layout bug on Safari 3.0.3 for Windows:

The combobox in the toolbar example (ext-1.1.1 (http://extjs.com/deploy/ext-1.1.1/examples/menu/menus.html) / ext-2.0-alpha1 (http://extjs.com/deploy/ext-2.0-alpha1/examples/menu/menus.html)) is displayed with the wrong dimensions.

ps. Is Safari 3 for Windows officially supported by ExtJS (the main page mentions Safari 2+) ?

[jsakalos]

Safari for Win is still beta.

Please consult http://extjs.com/forum/showthread.php?t=8887 before posting a qualified bug report.

[dotnetCarpenter]

Funny, I was going to submit the same bug now. Don't see the bug in Ext 2 though.

Eventhough Safari for windows is in beta, I believe the HTML engine is not and therefore it will look the same on a mac. I don't have a mac so I can't test it. :(

[wck555]

I was just at an Apple store looking at Leopard and the final release of Safari 3.

There is still a problem with the ComboBoxes and DateFields (I assume any TriggerField-derived control). It appears Safari 3 is rendering the text input larger than in Safari 2. The text input is now taller than the trigger button and extends slightly under the button. So the trigger button doesn't line up nicely with the text field any more.

I ran my web app (runs on Ext 1.1.1) through the paces on Safari 3 and everything else I checked was working perfectly.

[dotnetCarpenter]

Maybe we should dig into this and make a patch as I think the Ext team is occupied with the 2.0 release, at least for the next week.

[jsakalos]

Maybe we should dig into this and make a patch as I think the Ext team is occupied with the 2.0 release, at least for the next week.


Yeah, that would be very helpful. Please do so....;)

[dotnetCarpenter]

Ok, I've tried everything I could think of and I have come to the conclusion that the minimum height for textboxes in Safari is more than 18px. Meaning that there is nothing one can do to change that in CSS. With that in mind I tried to update the HTML engine (WebKit) and voila! It now looks fine. The short answer to this bug is that there is nothing you can do but tell your Safari/iPhone users to update their HTML engine (*sucks*).

Now I'm working on a small script snippet to check the version of safari...

http://nightly.webkit.org/

[dotnetCarpenter]

Arrghh! I need information about WebKit build versions.. Can someone who can see the bug in Safari post the build version of their WebKit (not Safari version)?
You can check your version here: http://developer.apple.com/internet/safari/faq.html#anchor2

I think the bug is fixed somewhere between version is 522.15.5 and 523.11.1 but I'm not sure. Thanks in advance!

[dotnetCarpenter]

Download http://trac.webkit.org/projects/webkit/wiki/DetectingWebKit and use this snippet...


<script type="text/javascript" src="lib/webkit/WebKitDetect.js"></script>
if(Ext.isSafari){
if(!WebKitDetect.versionIsAtLeast("523.11.1"))
{
var tmpText = "Dear Safari user.<br/>Safari ...";
tmpText += WebKitDetect.version().join(".");// get the user current WebKit version
tmpText += "You can acquire a new WebKit version here: <a href='http://nightly.webkit.org/'>http://nightly.webkit.org/</a>";
Ext.MessageBox.alert("Old Safari version", tmpText);
}
}

You might want to comment out line 86-87 in WebKitDetect.js if you have a nightly build
if (version.isNightlyBuild)
return true; when testing.

Maybe Ext could incorporate some of the WebKitDetect??

[eviltofu]

I'm using the nightly build webKit version 523.11+ and I still have the comboBox and checkbox error. Have you tried using the nightly build for windows?

[eviltofu]

Did you check the checkboxes? I'm using them in a BasicDialog and checkboxes render wider than display area, regardless of how wide I made the BasicDialog.

[dotnetCarpenter]

Have you tried using the nightly build for windows?
Yes, and it works but I haven't tested checkboxes yet...
Do you have a site somewhere we can look at?

You might have to start Safari with the command script: run-nightly-webkit.cmd

[eviltofu]

If you take a look (using safari) at the version 1.1.1 examples (form and combobox) and check dynamic forms you will see that the combobox is rendered CORRECTLY for form 3 (Fieldsets, labels right and complex fields). Now go to the comboboxes example and you will see that the combobox is rendered INCORRECTLY. What is the difference between these two controls? There is nothing different in the javascript. Please tell me what magic is used to render the first control! :P

[dotnetCarpenter]

I'm almost 100% sure it's a CSS bug in WebKit. Apple just releast an update today, which include a new version of Webkit. If we're are lucky the issue has solved itself. Can you confirm? I already have a new version of WebKit and I have no idea how to downgrade without reinstalling Safari.

[eviltofu]

Picture 1 depicts the mangled combobox and Picture 2 depicts the correctly displayed combobox. Using Safari 3.0.4 (523.12). I made a new account and used safari there to perform these screen captures.

I poked around a bit using web inspector and the line height for safari combo boxes was defined as 18 while the height of the input boxes were 20.

For Opera, I got 18 on both line height and input boxes.

According to the ext-all.css file.

.ext-strict .x-form-text{height:18px;}
.ext-safari .x-form-text{height:20px;}

So is Safari is rendering correctly but the css is not?

I changed

.ext-safari .x-form-text{height:20px;}
to
.ext-safari .x-form-text{height:16px;} and picture 3 is what it looks like.

[eviltofu]

Also, after changing the height to 16, the form in picture 2 is no longer rendered correctly.

[dotnetCarpenter]

Yeah I did somewhat the same but no matter what I tried, the css screw something else up... I'll give it another go and get back.