tab body container height is truncated in FF

[daveh0]

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:



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


<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?

[jsakalos]

Try to set layout:'fit' on the tab.

[jsakalos]

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>.

[daveh0]

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.


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

...same result.

[jsakalos]

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).

[daveh0]

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



<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.

[jsakalos]

Does this work?


<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>

[daveh0]

yup

[jsakalos]

OK, so build upon it.

[daveh0]

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).

[jsakalos]

I've read somewhere that style sheets should come first but I really cannot remember where it was. Most likely somewhere on Ext forums.