Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    40
    Vote Rating
    2
    rlegend is on a distinguished road

      0  

    Default [CLOSED-102][3.0.0] Ext.ux.GroupTabPanel layout with Firefox

    [CLOSED-102][3.0.0] Ext.ux.GroupTabPanel layout with Firefox


    Hi,

    When using Zoom In on Firefox the layout in the Ext.ux.GroupTabPanel breaks. This is occuring both on the demo page and my own implementation of it. This doesn't occur when using Safari or Chromium(for OSX).

    Firefox 3.5.1
    OSX 10.5.7
    ExtJS 3.0

    This is a screen shot after hitting Zoom on Firefox one time.




    I've successfully 'hacked' it to make it work with the following change, but the tabs and body no longer line up perfectly.

    This starts at line 265 of Ext.ux.GroupTabPanel, added code is in red.
    Code:
        onGroupBeforeTabChange: function(group, newTab, oldTab){
            if(group !== this.activeGroup || newTab !== oldTab) {
                this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
            } 
            
            this.expandGroup(this.getGroupEl(group));
            this.setActiveGroup(group);
        },
        
        getFrameHeight: function(){
            var h = this.el.getFrameWidth('tb');
            h += (this.tbar ? this.tbar.getHeight() : 0) +
            (this.bbar ? this.bbar.getHeight() : 0);
            
            return h;
        },
        
        adjustBodyWidth: function(w){
            return w - this.tabWidth - 2;
        }
    });
    
    Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);
    A screen shot with my 'fix'



    I love using this UX and I'd hate to have to can it because of this bug.
    Thanks in advance.

    Ron
    Last edited by rlegend; 28 Jul 2009 at 1:38 PM. Reason: The imageshack server the first image was hosted on was being really slow.

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    The page gets quite jumpy when you resize the browser width also.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2008
    Posts
    40
    Vote Rating
    2
    rlegend is on a distinguished road

      0  

    Default


    The following css changes seem to fix it without having to use the 'hack' I posted above.

    Starting at Line 20 of GroupTab.css
    Code:
    .x-tab-panel-left .x-grouptabs-bwrap {
    /*    float: right;*/
        position: relative;
    }
    .x-tab-panel-right .x-grouptabs-bwrap {
    /*    float: left;*/
        position: relative;
    }

  4. #4
    Ext User
    Join Date
    May 2010
    Location
    USA
    Posts
    4
    Vote Rating
    0
    gbohmer@tacticaltrust.com is on a distinguished road

      0  

    Default


    I am experiencing this problem as well with the Ext 3.2.1 GroupTab example. The CSS trick seems to fix FF 3.6, but breaks the same way in IE8. Unfortunately, this makes the component pretty unusable in a production scenario. Any additional input on this one?

  5. #5
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    I believe we had a lot of difficulty in finding a good solution to this and it's why its in the UX area of the library. The thread should be closed as it was decided there wasn't much we could do with text zooming at this point in time.

  6. #6
    Sencha User
    Join Date
    Sep 2010
    Posts
    2
    Vote Rating
    0
    dubnuts is on a distinguished road

      0  

    Default


    I realise this thread is closed. However I thought I would update just to share my experience with the fixes posted above, incase it helps anyone out.

    After applying the CSS fix, it solved it all the major browsers, with the exception of IE6 (yes I know its old, but we have some customers STILL using it). The fix completely broke IE6.

    IE6 does not support the browser zoom feature, so the solution was to conditionally include the fix if the browser is not IE6.

    With this implemented, the fix works on the following:

    IE9
    IE8
    IE7
    IE6
    Safari (OSX)
    Safari 5 (WIN)
    Firefox 13 (OSX)
    Firefox 12 (Win)
    Opera 11 (Win)

Similar Threads

  1. [CLOSED-416][3.??] border layout in grouptabpanel
    By plaak in forum Ext 3.x: Bugs
    Replies: 15
    Last Post: 15 Jan 2010, 10:25 AM
  2. [CLOSED][3.1] Ext example don't work in firefox
    By andkuha in forum Ext 3.x: Bugs
    Replies: 1
    Last Post: 20 Dec 2009, 5:48 PM
  3. [SOLVED]Adding on.click to images inside an hbox layout (grouptabpanel)
    By josh803316 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 3 Sep 2009, 5:11 PM
  4. TabPanel inside GroupTabPanel layout problem (Ext3 RC1.1)
    By Datagenn in forum Ext 3.x: Help & Discussion
    Replies: 6
    Last Post: 20 Jun 2009, 8:17 PM
  5. [CLOSED][3.??] ext-base FireFox Hang
    By boylesw in forum Ext 3.x: Bugs
    Replies: 3
    Last Post: 28 May 2009, 3:23 PM

Thread Participants: 4

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..." hd porno faketaxi