[CLOSED] Checkbox IndicatorIcon overlay problem

  1. #1

    [CLOSED] Checkbox IndicatorIcon overlay problem

    Hi all,
    with the upgrade from V4.4 to V4.5 a problem has occurred with some checkboxes inside <td/>.
    If the <td/> is hidden before the page loads and get showed after, the checkbox's IndicatorIcon is rendered over the checkbox.

    <div>
                <ext:ResourceManager runat="server" />
                <script>
                    Ext.onReady(function () {
                        document.getElementById("tdCheckbox").style.display = 'block';
                    });
                </script>
                <style>
                    .hidden{
                        display: none;
                    }
                </style>
                <ext:Panel runat="server" Height="100" ID="pnlMain">
                    <Content>
                        <table>
                            <tr>
                                <td>
                                    <ext:Checkbox runat="server" IndicatorIcon="Help" FieldLabel="Icon OK" ID="ckOk" />
                                </td>
                            </tr>    
                            <tr>
                                <td class="hidden" id="tdCheckbox">
                                    <ext:Checkbox runat="server" IndicatorIcon="Help" FieldLabel="Icon KO" ID="ckKo" />
                                </td>
                            </tr>    
                        </table>
                    </Content>
                </ext:Panel>
            </div>
    Setting the checkbox width or calling updateLayout() get no effects.
    Any ideas?
    Thank you!
    Last edited by fabricio.murta; Nov 15, 2017 at 2:22 PM.
  2. #2
    Hi Jimmy!

    We'll have to better check your test case before any definitive position is provided but it really look like related to the bug reported here: CheckBox not visible after calling .hide() followed by .show()

    Then -- if so -- the workaround suggested there may just work for you too.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi Fabricio,
    unfortunately, this workaround doesn't seem to work.
    The IndicatorIcon for checkboxes 'ckKo' and 'ckKo2' and is still displayed over the control even forcing the show/hide.
    The problem is for checkboxes inside a hidden HTML control.

    <script>                
                    var showCheckboxes = function () {
                        App.ckOk2.show();
                        
                        document.getElementById("tdCheckbox").style.display = 'block';
                        App.ckKo.innerWrapEl.setStyle('display', undefined);
                        
                        document.getElementById("tdCheckbox2").style.display = 'block';
                        App.ckKo2.show();
                        App.ckKo2.innerWrapEl.setStyle('display', undefined);
                    }
                    var hideCheckboxes = function () {
                        App.ckOk2.hide();
                        
                        document.getElementById("tdCheckbox").style.display = 'none';
                        
                        document.getElementById("tdCheckbox2").style.display = 'none';
                        App.ckKo2.hide();
                    }
                </script>
    <body>    <form id="form1" runat="server">        <div>            <ext:ResourceManager runat="server" />
                <ext:Panel runat="server" Height="200" ID="pnlMain">                <Content>                    
    <ext:Button runat="server" Text="Show checkboxes">                        
    <Listeners>                            
    <Click Handler="showCheckboxes();" />                        
    </Listeners>                    
    </ext:Button>                    
    <ext:Button runat="server" Text="Hide checkboxes">                        
    <Listeners>                            
    <Click Handler="hideCheckboxes();" />                        
    </Listeners>                    
    </ext:Button>                    
    <table>                        
    <tr>                            
    <td>                                
    <ext:Checkbox runat="server" IndicatorIcon="Help" FieldLabel="Icon OK" ID="ckOk" />                            
    </td>                        
    </tr>                        
    <tr>           
    <td>                                
    <ext:Checkbox runat="server" IndicatorIcon="Help" FieldLabel="Icon OK 2" ID="ckOk2" Hidden="true" />                            
    </td>                        
    </tr>         
    <tr>                            
    <td style="display: none;" id="tdCheckbox">                                
    <ext:Checkbox runat="server" IndicatorIcon="Help" FieldLabel="Icon KO" ID="ckKo" />                            
    </td>                        
    </tr>                        
    <tr>                            
    <td style="display: none;" id="tdCheckbox2">                                
    <ext:Checkbox runat="server" IndicatorIcon="Help" FieldLabel="Icon KO 2" ID="ckKo2" Hidden="true" />                            
    </td>                        
    </tr>                    
    </table>                </Content>            </ext:Panel>        </div>    </form></body>

    Thank you,
    Riccardo.
  4. #4
    Hello Riccardo!

    Thanks, I could reproduce the issue, it was, unfortunately, a regression with the fix for other issue, #1417.
    Well, good news is that you can skip the fix from that issue just by adding this to your page:

    <script type="text/javascript">
        Ext.define('gh1568', {
            override: 'Ext.form.field.Checkbox',
            updateIndicator: function () {
                var me = this;
    
                return me.callSuper(arguments);
            }
        });
    </script>
    Adding the IndicatorMovedToWrapEl may also help (it disables 90% of the #1417 fix -- but you can still see a little difference in positioning (your first post, line 23):

    <ext:Checkbox runat="server" IndicatorIcon="Help" FieldLabel="Icon KO" ID="ckKo" IndicatorMovedToWrapEl="true" />
    We've created issue #1568 to track and fix this defect. We'll post an update here as soon as we commit the fix to Ext.NET sources.

    Thanks for reporting the issue, I hope one of the workarounds is acceptable.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello again, Riccardo!

    I was trying here with ways to fix this issue, but seems the way you explore it you leave little to Ext.NET to do in order to avoid the issue. This also compromises other layout functionalities. For example, there's no event that can be triggered from the checkbox when you change its style and it gets shown. So this goes a little beyond Ext.NET's field.

    But I found a much nicer solution for you to avoid the issue without undoing other issues. Based on your first test case, change display to visibility to hide/show the outer div, and the layout will play nicely on the indicator icon.

    I mean, turn the style block (lines 8-12 on your test case) into:

    <style>
        .hidden{
            visibility: hidden;
        }
    </style>
    And your onReady() call (lines 4-6) into:

    Ext.onReady(function () {
        document.getElementById("tdck2").style.visibility = 'visible';
    });
    As for yet another alternative, you should let the checkbox know it need to move again the indicator position and update it once you first show the checkbox (checking if the indicator icon is in a bad position).

    For this second alternative, from your original source code, just change the onReady() (lines 4-6) code to:

    Ext.onReady(function () {
        document.getElementById("tdck2").style.display = 'block';
        if ((App.ck2.indicatorEl.getX() - App.ck2.displayEl.getX()) < 10) {
            App.ck2.indicatorMovedToWrapEl = false;
            App.ck2.updateIndicator();
        }
    });
    Well, at first seems like hiding by visibility is a more elegant solution for they layout issue, but if you have a requirement to hide via block, that would be the way to go. I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hi Fabricio,
    thank you for the solutions you provided.
    We've fixed that behaviour by calling fallowing script after the page loading:
    this.fixCheckboxIndicatorIcon = function(chk){
            if ((chk.indicatorEl.getX() - chk.displayEl.getX()) < 15) {
                chk.indicatorMovedToWrapEl = false;
                chk.updateIndicator();
            }
        }

    Riccardo.
  7. #7

    hideIndicator() problem

    Hi,
    we've discovered a potentially big problem:
    by calling hideIndicator() method the whole checkbox disappears.

    App.ckOk.hideIndicator();//make checkbox invisible
  8. #8
    Hello Riccardo!

    It would be best we handled this other issue in another thread. If that's a bug, then we'll have a dedicated thread for it. If you deem it worth, would you create a new forum thread elaborating on the issue you're talking about?
    Fabrício Murta
    Developer & Support Expert
  9. #9
    Hi,
    I've just created another thread: Checkbox-disappears-after-hiding-indicator

    Thanks,
    Riccardo.
  10. #10
    Hello Riccardo!

    Thank you very much! I'll mark this one as closed as I believe we have it done. If not, just let us know!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Toolbar overlay error
    By Z in forum 4.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 02, 2017, 12:34 AM
  2. [CLOSED] TextAreafield with an div overlay in front
    By Akpenob in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 09, 2014, 6:40 AM
  3. Replies: 4
    Last Post: Jun 10, 2013, 5:54 AM
  4. [CLOSED] IndicatorIcon placement
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 20, 2012, 6:40 PM
  5. Window overlay entire Portal page
    By JsonTerre in forum 1.x Help
    Replies: 1
    Last Post: Mar 28, 2011, 11:47 AM

Tags for this Thread

Posting Permissions