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

Thread: tab body container height is truncated in FF

  1. #1

    Default tab body container height is truncated in FF

    I have a very basic TabPanel with 3 tabs. The content of the 1st tab is very long and therefore must be scrolled. The height of the scrolling area is supposed to take up the entire body of the TabPanel. This displays as expected when there is only 1 tab (see screen shot 1), but for each subsequent tab added the height of the scrolling area of Tab 1 is decreased by about 20px (see screen shots 2 and 3).

    Here is my code:

    Code:
        gTabs = new Ext.TabPanel({
              id: 'gTabs'
            , renderTo: 'int'
            , height: 400
            , activeTab: 0
            , items: [{
                  title:'Tab 1'
                , contentEl: 'content_tab1'
                , autoScroll:true
            },{
                  title: 'Tab 2'
                , html: 'Tab 2 content'
            },{
                  title:'Tab 3'
                , html: 'Nothing to see in Tab 3'
            }]
        });
    and relevant HTML

    HTML Code:
        <div id="int" style="width:500px;height:400px;background:#fff;overflow:hidden;"></div>
        <div id="content_tab1" class="x-hide-display">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla nulla eget neque suscipit scelerisque. Nulla sodales, est quis pulvinar dignissim, tortor arcu dapibus turpis, in rutrum diam sem eu lacus. Integer mollis tempor mauris. Maecenas non dui. Duis tincidunt, felis vitae iaculis hendrerit, eros massa ornare turpis, id placerat orci quam at elit. Aliquam sit amet augue. Ut mollis dignissim sapien. Nulla facilisi. Donec mattis, enim sit amet feugiat tempus, nisi orci pretium est, pretium euismod diam orci sed erat. In et massa at augue viverra tincidunt. Proin urna urna, porttitor eget, aliquet a, bibendum sed, purus. Pellentesque dui lorem, semper id, viverra nec, pellentesque nec, quam. Nunc nec mi. Quisque molestie. Morbi vitae arcu vitae enim viverra auctor. Duis vitae nulla eget sapien laoreet facilisis. Nulla felis.Curabitur ullamcorper ante. Aliquam cursus, sapien ac vehicula ornare, libero diam adipiscing ante, a dictum tortor augue ut lacus. Donec blandit pellentesque erat. Nulla eu metus ac mi pellentesque varius. Donec eleifend elit vel ligula. Nullam leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eget felis. Sed mattis est quis diam cursus tincidunt. Suspendisse velit mauris, volutpat eu, cursus at, gravida vel, lectus. Nunc pharetra urna sit amet risus. Nullam dignissim eros at mauris. Aliquam augue. Nunc ipsum nibh, auctor ut, ornare scelerisque, placerat vitae, ipsum.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi turpis lacus, luctus vitae, dapibus ac, sagittis a, erat. Quisque consequat, ipsum et cursus convallis, libero ante placerat nulla, eget lacinia sapien metus at nulla. Ut tristique lectus vitae ligula. Donec laoreet porta leo. Fusce ipsum eros, faucibus vulputate, pretium a, vulputate vehicula, augue. Sed ipsum augue, fermentum in, mollis id, iaculis quis, ipsum. Integer ut urna. Morbi quis nisi. Quisque convallis congue mauris. Quisque placerat pretium quam. Pellentesque felis mi, consequat ut, rutrum non, laoreet eget, eros. 
        </div>
    This is only happening in FF. It does not happen if I render the TabPanel to Ext.getBody(). Does anybody know what might be causing this?
    Attached Images Attached Images

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Try to set layout:'fit' on the tab.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    BTW, I wouldn't render to a styled div, it can bring about problems that are hard to debug. Either render to Ext.getBody() or to a plain div: <div></div>.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #4

    Default

    Tried adding layout: 'fit' to the just Tab 1 and to all three tabs - same result.

    As far as rendering it to a styled <div> is concerned, I do not have the option to render it to the document body. I tried changing the html so that there are no style properties for the <div> it's being rendered to.

    HTML Code:
        <div id="ct" style="width:500px;height:400px;background:#fff;overflow:hidden;">
            <div id="int"></div>
        </div>
    ...same result.

  5. #5
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Putting un-styled div in a styled one doesn't change anything. Styling a component by html attributes of its container it is rendered into is the least preferred method. Styles inherited from the container can collide with the component styles/css rules and an unpredictable look would result. If you need to style a conponent you can set cls or bodyCls config options and write css classes.

    Try to render into <div id="ct"></div>. Another thing to try is to use html config option instead of contentEl (just to see if anything changes).
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  6. #6

    Default

    ok, I tried rendering it to a completely unstyled <div> that is not nested within any styled elements:

    HTML Code:
    <body>
        <div id="int"></div>
    </body>
    ...same result. I tried setting the content via the html config option - same result. And I was mistaken in my original post. Rendering it to the document body does result in the same behavior.

    I am stumped.

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Does this work?
    HTML Code:
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
      <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="ext/ext-all-debug.js"></script>
      <title id="page-title">autoScroll in Tab</title>
      <script type="text/javascript">
      Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
      Ext.onReady(function() {
        var tp = new Ext.TabPanel({
             renderTo:Ext.getBody()
            ,width:400
            ,height:300
            ,defaults:{layout:'fit', autoScroll:true}
            ,activeTab:0
            ,items:[{
                 title:'Tab 1'
                ,html:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla nulla eget neque suscipit scelerisque. Nulla sodales, est quis pulvinar dignissim, tortor arcu dapibus turpis, in rutrum diam sem eu lacus. Integer mollis tempor mauris. Maecenas non dui. Duis tincidunt, felis vitae iaculis hendrerit, eros massa ornare turpis, id placerat orci quam at elit. Aliquam sit amet augue. Ut mollis dignissim sapien. Nulla facilisi. Donec mattis, enim sit amet feugiat tempus, nisi orci pretium est, pretium euismod diam orci sed erat. In et massa at augue viverra tincidunt. Proin urna urna, porttitor eget, aliquet a, bibendum sed, purus. Pellentesque dui lorem, semper id, viverra nec, pellentesque nec, quam. Nunc nec mi. Quisque molestie. Morbi vitae arcu vitae enim viverra auctor. Duis vitae nulla eget sapien laoreet facilisis. Nulla felis.Curabitur ullamcorper ante. Aliquam cursus, sapien ac vehicula ornare, libero diam adipiscing ante, a dictum tortor augue ut lacus. Donec blandit pellentesque erat. Nulla eu metus ac mi pellentesque varius. Donec eleifend elit vel ligula. Nullam leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eget felis. Sed mattis est quis diam cursus tincidunt. Suspendisse velit mauris, volutpat eu, cursus at, gravida vel, lectus. Nunc pharetra urna sit amet risus. Nullam dignissim eros at mauris. Aliquam augue. Nunc ipsum nibh, auctor ut, ornare scelerisque, placerat vitae, ipsum.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi turpis lacus, luctus vitae, dapibus ac, sagittis a, erat. Quisque consequat, ipsum et cursus convallis, libero ante placerat nulla, eget lacinia sapien metus at nulla. Ut tristique lectus vitae ligula. Donec laoreet porta leo. Fusce ipsum eros, faucibus vulputate, pretium a, vulputate vehicula, augue. Sed ipsum augue, fermentum in, mollis id, iaculis quis, ipsum. Integer ut urna. Morbi quis nisi. Quisque convallis congue mauris. Quisque placerat pretium quam. Pellentesque felis mi, consequat ut, rutrum non, laoreet eget, eros.'
            },{
                 title:'Tab 2'
                ,html:'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla nulla eget neque suscipit scelerisque. Nulla sodales, est quis pulvinar dignissim, tortor arcu dapibus turpis, in rutrum diam sem eu lacus. Integer mollis tempor mauris. Maecenas non dui. Duis tincidunt, felis vitae iaculis hendrerit, eros massa ornare turpis, id placerat orci quam at elit. Aliquam sit amet augue. Ut mollis dignissim sapien. Nulla facilisi. Donec mattis, enim sit amet feugiat tempus, nisi orci pretium est, pretium euismod diam orci sed erat. In et massa at augue viverra tincidunt. Proin urna urna, porttitor eget, aliquet a, bibendum sed, purus. Pellentesque dui lorem, semper id, viverra nec, pellentesque nec, quam. Nunc nec mi. Quisque molestie. Morbi vitae arcu vitae enim viverra auctor. Duis vitae nulla eget sapien laoreet facilisis. Nulla felis.Curabitur ullamcorper ante. Aliquam cursus, sapien ac vehicula ornare, libero diam adipiscing ante, a dictum tortor augue ut lacus. Donec blandit pellentesque erat. Nulla eu metus ac mi pellentesque varius. Donec eleifend elit vel ligula. Nullam leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eget felis. Sed mattis est quis diam cursus tincidunt. Suspendisse velit mauris, volutpat eu, cursus at, gravida vel, lectus. Nunc pharetra urna sit amet risus. Nullam dignissim eros at mauris. Aliquam augue. Nunc ipsum nibh, auctor ut, ornare scelerisque, placerat vitae, ipsum.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi turpis lacus, luctus vitae, dapibus ac, sagittis a, erat. Quisque consequat, ipsum et cursus convallis, libero ante placerat nulla, eget lacinia sapien metus at nulla. Ut tristique lectus vitae ligula. Donec laoreet porta leo. Fusce ipsum eros, faucibus vulputate, pretium a, vulputate vehicula, augue. Sed ipsum augue, fermentum in, mollis id, iaculis quis, ipsum. Integer ut urna. Morbi quis nisi. Quisque convallis congue mauris. Quisque placerat pretium quam. Pellentesque felis mi, consequat ut, rutrum non, laoreet eget, eros.'
            }]
        });
      });
      </script>
    </head>
    <body>
    </body>
    </html>
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  8. #8

    Default

    yup

  9. #9
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    OK, so build upon it.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  10. #10

    Default

    well it seems that adding the style sheet before any of the <script> tags is the difference between what I had and what you just posted. Made the change in my file and it appears to be working.

    Any idea as to why? (just so I can understand what's going on behind the scenes).

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
  •