Results 1 to 3 of 3

Thread: Invisible <select>objects in IE

  1. #1

    Default Invisible <select>objects in IE

    I have tabbed dialog box with bunch of <select> HTML objects in one of the tabs. Problem is they invisible in IE (Mozilla shows them fine). In more details: I have 2 tabs and my <select>s are in the 2nd tab. When dialog opened tab #1 is active. If I switch to tab #2 all <select>s are invisible. Now, if I close dialog and open it again, since tab #2 was last active it opens as active and all my <select>s are visible. If I switch to #1 an back to tab #2 all selects are invisible again. Here is my code:
    Code:
        <form name="form_options" method="POST" onsubmit="return false;">
        <div id="OptionsDlg" style="visibility:hidden;position:absolute;top:0px;">
            <div class="x-dlg-hd">Options</div>
            <div id="div_options_main" class="x-dlg-bd">
                <div class="x-dlg-tab" title="Account">
                    <div id="div_tab_opt_acct" class="inner-tab">
                        <table border="0" cellpadding=0 cellspacing=3 style="font:bold 11px tahoma, arial, helvetica, sans-serif; color:#15428b">
                            <tr><td class="x-form fieldset legend">Login</td><td><input type="text" name="m_login" class="x-form-text"></td></tr>
                            <tr><td>First Name</td><td><input type="text" name="m_fname" class="x-form-text"></td></tr>
                            <tr><td>Last Name</td><td><input type="text" name="m_lname" class="x-form-text"></td></tr>
                            <tr><td>Home Phone</td><td><input type="text" name="m_hphone" class="x-form-text"></td></tr>
                            <tr><td>Work Phone</td><td><input type="text" name="m_wphone" class="x-form-text"></td></tr>
                            <tr><td>Cell Phone</td><td><input type="text" name="m_cphone" class="x-form-text"></td></tr>
                        </table>
                    </div>
                </div>
                <div class="x-dlg-tab" title="UI Settings">
                    <div id="div_tab_opt_ui" class="inner-tab">
                        <table border="0" cellpadding=0 cellspacing=3 style="font:bold 11px tahoma, arial, helvetica, sans-serif; color:#15428b">
                            <tr><td>Date Format</td><td><select name="m_ui_fmt_date" class="x-form-select-one"></select></td></tr>
                            <tr><td>Time Format</td><td><select name="m_ui_fmt_time" class="x-form-select-one"></select></td></tr>
                            <tr><td>Trip Button #1</td><td><select name="m_ui_vt_btn1" class="x-form-select-one"><option value="h6">6 hours</option><option value="h12">12 hours</option><option value="d1">1 day</option><option value="d2">2 days</option><option value="w2">2 weeks</option><option value="m1">1 month</option></select></td></tr>
                            <tr><td>Trip Button #2</td><td><select name="m_ui_vt_btn2" class="x-form-select-one"><option value="h6">6 hours</option><option value="h12">12 hours</option><option value="d1">1 day</option><option value="d2">2 days</option><option value="w2">2 weeks</option><option value="m1">1 month</option></select></td></tr>
                            <tr><td>Trip Button #3</td><td><select name="m_ui_vt_btn3" class="x-form-select-one"><option value="h6">6 hours</option><option value="h12">12 hours</option><option value="d1">1 day</option><option value="d2">2 days</option><option value="w2">2 weeks</option><option value="m1">1 month</option></select></td></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        </form>
    
    ....
    
    and in Javascript
    
                    OnClickOptions._dlg = new Ext.BasicDialog("OptionsDlg", {
                            modal:true,
                            autoTabs:true,
                            width:350,
                            height:300,
                            shadow:true,
                            minWidth:300,
                            minHeight:250,
                            proxyDrag: false
                    });
    Should I post it in the Bugs forum?
    Thank you.

  2. #2

    Default

    Bump. Anyone?

  3. #3

    Default

    Here is hackish solution to that bug:
    Code:
                    OnClickOptions._dlg = new Ext.BasicDialog("OptionsDlg", {
                            modal:true,
                            autoTabs:true,
                            width:350,
                            height:300,
                            shadow:true,
                            minWidth:300,
                            minHeight:250,
                            proxyDrag: false
                    });
                    OnClickOptions._dlg.addKeyListener(27, OnClickOptions._dlg.hide, OnClickOptions._dlg);
                    OnClickOptions._dlg.addButton('Save', OnSaveOptions, OnClickOptions._dlg);
                    OnClickOptions._dlg.addButton('Cancel', OnClickOptions._dlg.hide, OnClickOptions._dlg);
                    // this fixes IE bug of not showing <select> objects in the tab
                    OnClickOptions._dlg.getTabs().on('tabchange', function (panel, item) {
                        OnClickOptions._dlg.resizeTo(OnClickOptions._dlg.width,OnClickOptions._dlg.height);
                    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •