[1.1.1] BasicDialog with Checkbox Rendering Bug On Safari

January 7th, 2009   Filed Under naaktbelgisch.com   edit

  • 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.defaultDialogPrope rties = {
    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.createDi alog = function() {
    var node = Ext.get(document.createElement('div'));
    var body = Ext.get(document.body);
    body.appendChild(node);
    this.dialog = new Ext.BasicDialog(node,Tofusoft.MarketShippingDelega te.defaultDialogProperties);
    };

    Tofusoft.MarketShippingDelegate.prototype.createFo rm = function() {
    this.form = new Ext.form.Form({
    labelAlign: "right",
    labelWidth: 100,
    buttonAlign: "right"
    });
    this.form.add(new Ext.form.TextField({fieldLabel:'Market',name:'mark et',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'}));
    }


  • 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


  • hmm... you might have to add custom CSS to deal with Safari's / 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.


  • So there is no current solution for this?


  • 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.





    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;
    }


  • 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?


  • 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







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about [1.1.1] BasicDialog with Checkbox Rendering Bug On Safari , Please add it free.

    Post Linx
    Permalink | Trackback | | Print This Article |

    Bulk Vending Machines - a Good Small Business
    Web Pointers for Successful eCommerce