ENART.POLALA.COM
welcome to my space

TAB behavior with image

Published by: admin 2010-03-18

Hello,

The behavior of the tabs in a tab panel changes when an image is inserted in the text of a tab. The tab with the image always will look active even if the user clicks the other tab. This is a simple code that generates a panel with two tabs:

var TabsExample = {

init : function(){

// basic tabs 1, built from existing content

var tabs = new Ext.TabPanel('tabs1');

var t1 = tabs.addTab('tab 1', " Tab 1");

var t2 = tabs.addTab('tab 2', "Tab 2");

tabs.activate('tab 1');

t1.setContent("
Content of tab 1")

t2.setContent("
Content of tab 2")

}

}

Ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);

An image of the output is attached too. Do somebody knows how can this be fixed?

Thanks in advance,
Novandria

The image is making the tab element too deep.

Use a background image instead of an embedded image, or size your image explicitly to height:16px.

Thank you for the replies.

jsakalos,

> Can you please prepare a complete html/js file(s) that I'd drop into ext tree and that would show the problem?
These are the example files:
HTML:

Tabs Example

Tab Panel Examples

Note that the js and css is not minified so it is readable. See tabs-example.js for the tab creation code

and tabs-example.css for the css.

Tabs without fixed height that resize to the content. Built from existing markup.

Here's my script:





var tabs = new Ext.TabPanel('tabs1');



tabs.addTab('script', "View Script");



tabs.addTab('markup', "View Markup");



tabs.activate('script');

Can you please prepare a complete html/js file(s) that I'd drop into ext tree and that would show the problem?