1. #1
    Ext Partner geoffrey.mcgill's Avatar
    Join Date
    Feb 2008
    Location
    Canada
    Posts
    85
    Vote Rating
    4
    geoffrey.mcgill is on a distinguished road

      0  

    Default TabPanel inside html <table> stetches mega far

    TabPanel inside html <table> stetches mega far


    I've come across an issue where if a TabPanel is renderTo'ed a <div> container which is inside an html <table>, the TabPanel stretches way beyond the screen width.

    Only happens in IE (6+7). FF and others are fine.

    See the following link for full working sample.

    http://doodle.coolite.com/temp/tabpa...sidetable.html

    If the var tp = new Ext.TabPanel is changed to var tp = new Ext.Panel it works as expected. Problem only seems to occur when TabPanel is used.

    Any help finding a work-around for this problem would be greatly appreciated.

    Here's the full source code for the example just in case the link above goes dead at some point.

    HTML 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>
        <title>TabPanel inside Table</title>
        
    	<link rel="stylesheet" type="text/css" href="../../extjs/resources/css/ext-all.css" />
    	<script type="text/javascript" src="../../extjs/adapter/ext/ext-base.js"></script>
    	<script type="text/javascript" src="../../extjs/ext-all.js"></script>
    	
    	<script type="text/javascript">
            Ext.BLANK_IMAGE_URL="../../extjs/resources/images/default/s.gif";
            Ext.onReady(function() {
                var tp = new Ext.TabPanel({
                    renderTo: "container",
                    items: {
                        html: "Tab 1",
                        title: "Tab 1"
                    },
                    activeTab: 0
                });
            });
    	</script>
    	
    </head>
    <body>
        <table style="width: 100%;">
            <tr>
                <td>
                    <div id="container"></div>
                </td>
            </tr>
        </table>
    </body>
    </html>

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    The tab strip container in a TabPanel has a fixed width of 5000px in CSS. I can't remember the exact reason (Jack could tell you) but it was for cross-browser tab scrolling I believe. Unfortunately, while other browsers treat the overall container as auto width and render OK, IE does what you are seeing. The official answer within an Ext layout is to always make sure that each level is either A) managed by a layout that sets dimensions, or B ) has fixed width. Since you are rendering the TabPanel into a plain div with no width, it does not meet either criterion.

    The two common workarounds I've seen are:
    • Override the 5000px width and set it to auto width in CSS. This works OK for reasonably-sized tab sets, but if have to support a lot of tabs, this may not scale well.
    • Write code to monitor changes in size of either the viewport or your target element, and sync the size of the TabPanel to what you need manually. This effectively provides similar layout logic of using something like a FitLayout but without actually having an Ext Container wrapping your component.

  3. #3
    Ext Partner geoffrey.mcgill's Avatar
    Join Date
    Feb 2008
    Location
    Canada
    Posts
    85
    Vote Rating
    4
    geoffrey.mcgill is on a distinguished road

      0  

    Default


    Here's what I'm going to go with in this scenario...

    Created a new css class called .auto-width-tab-strip.

    HTML Code:
    <style type="text/css">
        .auto-width-tab-strip ul.x-tab-strip {
            width: auto;
        }
    </style>
    Then I apply the .auto-width-tab-strip class to the "cls" config of TabPanel. This way you can set the width to auto on specific TabPanel's as required and ignore others.

    Here's the full code sample.

    Example

    HTML 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>
        <title>TabPanel inside table</title>
        
    	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    
        <style type="text/css">
            .auto-width-tab-strip ul.x-tab-strip {
                width: auto;
            }
        </style>
        
    	<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    	<script type="text/javascript" src="../extjs/ext-all.js"></script>
    	
        <script type="text/javascript">
            Ext.onReady(function() {
                var tp = new Ext.TabPanel({
                    cls: "auto-width-tab-strip",
                    height: 300,
                    renderTo: "container",
                    items: [{
                        id: "Tab1",
                        title: "Tab 1"
                    }],
                    activeTab: 0
                });
            });
            Ext.BLANK_IMAGE_URL = "../extjs/resources/images/default/s.gif";	
        </script>
    </head>
    <body>
        <table style="width: 100%;">
            <tr>
                <td>
                    <div id="container" />
                </td>
            </tr>
        </table>
    </body>
    </html>
    As you stated, the best solution would be to use a Layout or set a fixed width.

  4. #4
    Sencha User
    Join Date
    Jan 2009
    Posts
    5
    Vote Rating
    0
    iksik is on a distinguished road

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    The tab strip container in a TabPanel has a fixed width of 5000px in CSS. I can't remember the exact reason (Jack could tell you) but it was for cross-browser tab scrolling I believe.
    Correct.

    Quote Originally Posted by brian.moeskau View Post
    Unfortunately, while other browsers treat the overall container as auto width and render OK, IE does what you are seeing.
    And now You are wrong. I have this "issue" on Firefox 3.0.5.

  5. #5
    Sencha User
    Join Date
    Nov 2009
    Posts
    1
    Vote Rating
    0
    cornish is on a distinguished road

      0  

    Default


    Thanks, this was very helpful.

  6. #6
    Ext User
    Join Date
    Jun 2010
    Posts
    2
    Vote Rating
    0
    timrei is on a distinguished road

      0  

    Default


    great catch, thank you!

    I've been looking for something like this for hours.

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    8
    Vote Rating
    0
    Wout92 is on a distinguished road

      0  

    Default


    FYI:
    Also occurs in Chrome, using version 18.0.1025.162 m.