This issue duplicates another issue.
  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    30
    Vote Rating
    2
    dpchrist is on a distinguished road

      0  

    Post Button tooltip covers up part of the button when at bottom right of window

    Button tooltip covers up part of the button when at bottom right of window


    REQUIRED INFORMATION

    Ext version tested:
    • 4.1
    • 4.1.1
    Browser versions tested against:
    • IE9
    • FF 13.0.01
    • Chrome 20.0.1132.47
    DOCTYPE tested against:
    • See the example
    Description:
    • When a button is located in the bottom right of the screen, the tooltip should shift to the left of the button. Instead, it partially covers the button so the button click will not be registered.
    Steps to reproduce the problem:
    • Run the example code.
    • Resize the window to be the size of the ExtJS window.
    • Hover over the "Hover Error" button. (This is just an easy way to reproduce the problem. We have this exact issue in our application but reproducing that layout in an example would be very difficult. In our case, the window is maximized, but we happen to have a button at the bottom right corner of the screen.
    The result that was expected:
    • The tooltip will show to the left of the button and not cover up the button where the mouse is located.
    The result that occurs instead:
    • Depending on the browser, the toolip will cover up the top or the bottom of the browser and the mouse click will be lost because the tooltip is accepting the click.
    Test Case:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Button Hover-Over Test</title>
    
    
            <link rel="stylesheet" type="text/css" href="../extjs4/resources/css/ext-all.css" />
    
    
            <script type="text/javascript"  src="../extjs4/ext-debug.js"></script>
    
    
    
    
            <script type="text/javascript">
                Ext.require('Ext.form.*');
    
    
                Ext.onReady(function() {
                    Ext.tip.QuickTipManager.init();
                    Ext.createWidget('form', {
                        renderTo:  Ext.getBody(),
                        title: 'Number fields with spinner',
                        bodyPadding: 5,
                        frame: true,
                        width: 340,
                        fieldDefaults: {
                            labelAlign: 'left',
                            labelWidth: 105,
                            anchor: '100%'
                        },
                        items: [{
                                xtype: 'numberfield',
                                fieldLabel: 'Default',
                                name: 'number1',
                                value: 1,
                                minValue: 1,
                                maxValue: 125
                            },
                            {
                                xtype: 'numberfield',
                                fieldLabel: 'With a step of 0.4',
                                name: 'number2',
                                minValue: -100,
                                maxValue: 100,
                                allowDecimals: true,
                                decimalPrecision: 1,
                                step: 0.4
                            },
                            {
                                xtype: 'button',
                                text: 'Button 1',
                                tooltip: 'Click this button to execute Button 1',
                                handler: function(btn) {
                                    var vForm = btn.up('form');
                                    vField.setReadOnly(!vField.readOnly);
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'Button 2',
                                tooltip: 'Click this button to execute Button 2',
                                handler: function(btn) {
                                    var vForm = btn.up('form');
                                    vField.setReadOnly(!vField.readOnly);
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'Button 3',
                                tooltip: 'Click this button to execute Button 3',
                                handler: function(btn) {
                                    var vForm = btn.up('form');
                                    vField.setReadOnly(!vField.readOnly);
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'Button 4',
                                tooltip: 'Click this button to execute Button 4',
                                handler: function(btn) {
                                    var vForm = btn.up('form');
                                    vField.setReadOnly(!vField.readOnly);
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'Hover Error',
                                tooltip: 'Click this button to load a record',
                                handler: function(btn) {
                                    var vForm = btn.up('form');
                                    vField.setReadOnly(!vField.readOnly);
                                }
                            }
                        ]
                    });
                });
            </script>
        </head>
    
    
        <body>
        </body>
    </html>

    HELPFUL INFORMATION

    Screenshot or Video:
    • attached
    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can use a Window instead of a form to move it instead of resizing the browser:

    Code:
    Ext.tip.QuickTipManager.init();
    Ext.create('Ext.window.Window', {
        autoShow      : true,
        constrain     : true,
        title         : 'Number fields with spinner',
        bodyPadding   : 5,
        frame         : true,
        width         : 340,
        fieldDefaults : {
            labelAlign : 'left',
            labelWidth : 105,
            anchor     : '100%'
        },
        items         : [
            {
                xtype      : 'numberfield',
                fieldLabel : 'Default',
                name       : 'number1',
                value      : 1,
                minValue   : 1,
                maxValue   : 125
            },
            {
                xtype            : 'numberfield',
                fieldLabel       : 'With a step of 0.4',
                name             : 'number2',
                minValue         : -100,
                maxValue         : 100,
                allowDecimals    : true,
                decimalPrecision : 1,
                step             : 0.4
            },
            {
                xtype   : 'button',
                text    : 'Button 1',
                tooltip : 'Click this button to execute Button 1',
                handler : function (btn) {
                    var vForm = btn.up('form');
                    vField.setReadOnly(!vField.readOnly);
                }
            },
            {
                xtype   : 'button',
                text    : 'Button 2',
                tooltip : 'Click this button to execute Button 2',
                handler : function (btn) {
                    var vForm = btn.up('form');
                    vField.setReadOnly(!vField.readOnly);
                }
            },
            {
                xtype   : 'button',
                text    : 'Button 3',
                tooltip : 'Click this button to execute Button 3',
                handler : function (btn) {
                    var vForm = btn.up('form');
                    vField.setReadOnly(!vField.readOnly);
                }
            },
            {
                xtype   : 'button',
                text    : 'Button 4',
                tooltip : 'Click this button to execute Button 4',
                handler : function (btn) {
                    var vForm = btn.up('form');
                    vField.setReadOnly(!vField.readOnly);
                }
            },
            {
                xtype   : 'button',
                text    : 'Hover Error',
                tooltip : 'Click this button to load a record',
                handler : function (btn) {
                    var vForm = btn.up('form');
                    vField.setReadOnly(!vField.readOnly);
                }
            }
        ]
    });
    We also have an internal bug reported for this same thing.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    30
    Vote Rating
    2
    dpchrist is on a distinguished road

      0  

    Default


    Thanks for the quick reply.

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."