This issue duplicates another issue.
  1. 11 Jul 2012 6:38 AM #1
    dpchrist
    dpchrist is offline
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    29
    Vote Rating
    1
    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
    Reply With Quote Reply With Quote
  2. 11 Jul 2012 6:43 AM #2
    mitchellsimoens
    mitchellsimoens is offline
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,617
    Vote Rating
    435
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      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
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    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 almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  3. 11 Jul 2012 6:46 AM #3
    dpchrist
    dpchrist is offline
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    29
    Vote Rating
    1
    dpchrist is on a distinguished road
      0  

    Default


    Thanks for the quick reply.
    Reply With Quote Reply With Quote

Tags for this Thread