Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Toolbar button alignment in IE

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default Toolbar button alignment in IE

    Perhaps unsurprisingly, IE is giving me the run-around. Here's a link: http://www.holiday-chateau.com/index.php?id=10790

    You'll notice that in FF the toolbar on the grid on the first tab is beautifully aligned to the left. In IE, it center aligns everything and the toolbar runs out the side of the grid panel.

    Anyone know of a fix for this?

  2. #2
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178

    Default

    in IE8 your tabpanel has not the same position then then in FF...


    toolbar: hard to find error without some piece of code. i think your toolbar runs out of the line, cause the buttons got some extra white spaces before your icon.....
    maybe some iconCls are not correct. if nothing helps at all,
    u can add a img tag to your textattribute...

    Code:
                            
    text            : '<img src="pathtoimage" /> Sort by min capacity',
    id            : 'toolbar-sort-capacity',
    tooltip            : 'Click to sort results by minimum capacity'

  3. #3
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    Here's the code for the toolbar:

    Code:
                    var gridToolbar = new Ext.Toolbar({
                        width: 200,
                        items: 
                        [{                        
                            text            : 'Sort by min capacity',
                            id                : 'toolbar-sort-capacity',
                            tooltip            : 'Click to sort results by minimum capacity',
                            cls                : 'x-btn-text-icon',    
                            icon            : 'fileadmin/templates/images/sort.gif',
                            handler            : function(e) 
                            {
                                refreshGridStore(true, 'capacity');
                            }
                        }, 
                        '-', 
                        {
                            text    : 'Sort by max price',
                            id        : 'toolbar-sort-price',
                            tooltip    : 'Click to sort results by maximum weekly price',
                            cls        : 'x-btn-text-icon',
                            icon    : 'fileadmin/templates/images/sort.gif',
                            handler    : function(e) 
                            {
                                refreshGridStore(true, 'price');
                            }
                        },
                        '-',
                        {
                            text    : 'Sort by country/region',
                            tooltip    : 'Click to sort results by country and region',
                            cls        : 'x-btn-text-icon',
                            icon    : 'fileadmin/templates/images/sort.gif',
                            handler    : function(e) 
                            {
                                refreshGridStore(true, 'country');
                            }
                        }]    
                    });
    What confuses me most is why it works perfectly on FF and not in IE8.....?

  4. #4
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178

    Default

    i've tested your toolbar in my application, everthing works fine.

    ie8.jpg

    i used this code

    Code:
              this.theTopToolBar = new Ext.Toolbar({
                        width: 200,
                        items: 
                        [{                        
                            text            : 'Sort by min capacity',
                            id                : 'toolbar-sort-capacity',
                            tooltip            : 'Click to sort results by minimum capacity',
                            icon            : 'http://www.holiday-chateau.com/fileadmin/templates/images/sort.gif'
                        }, 
                        '-', 
                        {
                            text    : 'Sort by max price',
                            id        : 'toolbar-sort-price',
                            tooltip    : 'Click to sort results by maximum weekly price',
                            icon    : 'http://www.holiday-chateau.com/fileadmin/templates/images/sort.gif'
                        },
                        '-',
                        {
                            text    : 'Sort by country/region',
                            tooltip    : 'Click to sort results by country and region',
                            icon    : 'http://www.holiday-chateau.com/fileadmin/templates/images/sort.gif'
                        }]    
                    });
    it seems that it is no ext problem, if nothing helps , remove your icon and iconcls and check the length of your three buttons. if the length is ok, u can add a the icon for the buttons in text attribute

    text : '<img src="pathtoimage" /> Sort by min capacity',

  5. #5
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    How odd! btw, just tried adding the image via the text attribute, removing the icon and iconCls attributes and there's no change in the button width or alignment. All that happens is the text and image aren't aligned properly (which I realise could be sorted with css).

  6. #6
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178

    Default

    have u tried to set a width for your buttons? e.g to 50 ?

  7. #7
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    Yup. Even tried completely silly values like 10 and there's absolutely no change to the toolbar at all.

  8. #8
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178

    Default

    strange, have tried to run your ext application standalone? on my ext application your code works on IE8. But my application runs only with extjs, no html and divs inside the website.....

  9. #9
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default

    Yea, I think I'm gonna have to try that....although I know if it works on it's own, it doesn't help me work out why it's going wrong as it currently is

    My best guess is it must be something to do with the parent objects as most of the css looks fine.

  10. #10
    Ext User
    Join Date
    Oct 2008
    Location
    Ger
    Posts
    178

    Default

    yes, this can be...but your toolbar looks fine...gl!

Page 1 of 2 12 LastLast

Posting Permissions

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