html loaded into tab or panel - has line at bottom?
Posted in xn--kfs74mzzid01b.com edit by jack on January 7th, 2009
I'm using the load() method on a tab or a panel to dynamically display html inside of it. After some help here on the forum, it works. however let's say the panel is 500px tall, and you only load a couple lines worth of text. At the bottom of the displayed text there is a line indicating the "end" of the contents.
If you fill the rest of the html with line breaks or whatever, you can of course get the line to disappear off the bottom of the tab/panel, but I'm trying to understand what is causing the behavior. Is there some way to set the display of the tab/panel to not do this? I have tried "height: xxx" in the config for the panel, doesn't affect it. Or do I need to load the html into another container with some kind of size config?
the jpeg shows a side panel with some links loaded into it...with the aforementioned line.
this.tabs = new Ext.TabPanel({
id:'mainTabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
autowidth: true,
autoheight: true,
})
Note the last two. This is the source of the visual line around the tab contents. If you don't want the tab to "auto-size" around your html you have to set this height.
Also, autoheight doesn't work so well in IE7. The entire tab contents are shown in a single line height with tiny scroll buttons, as if it was set to 'height: 5'.
My workaround is to set a manual height, something large. So now my config says
autowidth: true,
height: 1000
And this displays properly in FF, IE7, and Opera, whereas if you leave in "autoheight" it will only work in FF and Opera.
#If you have any other info about this subject , Please add it free.# |
