[1.1.1] BasicDialog with Checkbox Rendering Bug On Safari

[eviltofu]

No matter how wide I make the BasicDialog box, the scroll bars still remain. I've tracked it down to the CheckBox element. If I remove it, the BasicDialog box does not have the scroll bars. If I do enclose the Checkbox in a Fieldset, the scroll bars go away.

included below is a screen shot of the dialog.

This does not appear of Firefox 2.008, IE 6.0.2900*, Opera 9.24 on XP and Firefox 2.008 on OS X.

Thank you for your help. Information follows.

Ext Version : 1.1.1
ext-base.js

Macintosh OS X 10.4.10 with Safari 3.0.3 (522.12.1)

Windows XP Home Edition Version 2002 Service Pack 2 with Safari 3.0.3 (522.15.5)



Tofusoft.MarketShippingDelegate.defaultDialogProperties = {
width: 320,
height:220,
modal: true,
shadow: true,
closable: false,
collapsible: false,
draggable: true,
fixedcenter: true,
resizable: false,
title: "Markets And Shipping Rates Editor"
};

Tofusoft.MarketShippingDelegate.prototype.init = function() {
this.initData();
this.createDialog();
this.createForm();
this.dialog.body.applyStyles("padding:10px");
this.form.render(this.dialog.body);
this.dialog.addButton("Cancel",this.cancel,this);
this.dialog.addButton("Change",this.change,this);
};

Tofusoft.MarketShippingDelegate.prototype.initData = function() {
this.shippingTypeList = [
['0', 'Local'],
['1', 'Overseas']
];
}

Tofusoft.MarketShippingDelegate.prototype.createDialog = function() {
var node = Ext.get(document.createElement('div'));
var body = Ext.get(document.body);
body.appendChild(node);
this.dialog = new Ext.BasicDialog(node,Tofusoft.MarketShippingDelegate.defaultDialogProperties);
};

Tofusoft.MarketShippingDelegate.prototype.createForm = function() {
this.form = new Ext.form.Form({
labelAlign: "right",
labelWidth: 100,
buttonAlign: "right"
});
this.form.add(new Ext.form.TextField({fieldLabel:'Market',name:'market',disabled:true}));
this.form.add(new Ext.form.TextField({fieldLabel:'Brand',name:'brand',disabled:true}));
this.store = new Ext.data.SimpleStore({fields:['sid', 'state'],data:this.shippingTypeList});
this.form.add(new Ext.form.Checkbox({fieldLabel:'Available',checked:false,name:'availability'}));
this.comboBox = new Ext.form.ComboBox({
store: this.store,
fieldLabel:'Shipping Type',
name:'shippingType',
mode:'local',
valueField: 'sid',
displayField:'state',
editable: false,
forceSelect:true,
triggerAction:'all'});
this.form.add(this.comboBox);
this.form.add(new Ext.form.TextField({fieldLabel:'Shipping Rates',name:'shippingRate'}));
}

[mystix]

i'm not sure it's just the checkbox alone. you seem to have other rendering issues as well

your ComboBox's trigger image is shorter than your input field
all your input fields are a tad bit too tall


are you including any custom CSS to affect the height of input fields / checkboxes etc?

[eviltofu]

When rendered on a mac using Firefox 2.0.0.8, the problems you describe do not appear. Enclosed below is a screen shot of the dialog box.

The css files included are in this order.


<link rel="stylesheet" href="/admin/lib/extjs/resources/css/ext-all.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="/admin/lib/extjs/resources/css/xtheme-vista.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="/admin/css/main.css" type="text/css" media="screen" title="no title" charset="utf-8">

main.css contains the following:


body {
font-family: Helvetica, Verdana, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10pt;
background-color: silver;
color: black;
}

a.link:link {
color: white;
text-decoration: none;
padding: 2px;
}

a.link:visited {
color: white;
text-decoration: none;
padding: 2px;
}

a.link:hover {
text-decoration: none;
color: white;
background-color: black;
padding: 2px;
}

div.grid {
height:500px;
width:750px;
}

[mystix]

hmm... you might have to add custom CSS to deal with Safari's <input> / <input type="checkbox"> fields on safari for mac.

p.s. i've just put up a feature request in the Open Discussions forum for the ext-mac / ext-linux OS identifier CSS classes to be placed in the document.body's parent instead of at the same level as the ext-gecko/ext-ie/ext-safari CSS classes so it'd be easier to implement custom CSS to handle browser+OS specific problems like this.

[eviltofu]

So there is no current solution for this?

[mystix]

So there is no current solution for this?

unfortunately, short of adding custom css, the answer's no for now.
(plus i can't test it cos i don't own a mac :(:()

on a side note: could this be related?
http://extjs.com/forum/showthread.php?p=80900#post80900

[eviltofu]

The problem also exists for Safari for Windows. You could test with that! :P Also, in another one of my messages, I noted that the combobox renders correctly in one demo while not in another.

http://extjs.com/forum/showthread.php?p=87099#post87099