PDA

View Full Version : [CLOSED] Adding a span tag creates line breaks in a tab title



kngai
14 Dec 2010, 12:52 PM
I noticed that adding a span tag within a tab's title will create line breaks around it. This is using Ext 3.3.1. Here is my sample html with the javascript to describe the issue:



<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- CSS for ExtJS -->
<link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" />

<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

Ext.Container.prototype.bufferResize = false;

var myTabPanel = new Ext.TabPanel({
activeTab: 0,
items: [{
title: 'My Tab title <span style="color: red;">in red</span>',
xtype: 'panel',
layout: 'fit',
html: 'My Tab title &lt;span style="color: red;"&gt;in red&lt;&frasl;span&gt;'
},{
title: 'Another tab',
xtype: 'panel',
layout: 'fit',
html: 'A normal tab with no span tags'
},{
title: 'Empty <span>span</span> tag',
xtype: 'panel',
layout: 'fit',
html: "Empty &lt;span&gt;span&lt;&frasl;span&gt; tag"
}]
});

var westPanel = new Ext.Panel({
region:'west',
title: 'West',
margins:'5 0 5 5',
split:true,
width: 400,
layout: 'fit',
layoutConfig: {animate: true, sequence: true},
defaults: {border:false, autoScroll: true, animCollapse: true, forceLayout: true},
items: [myTabPanel]
});

var myBox = new Ext.BoxComponent({
region: 'north',
id: 'myBox',
el: 'my-heading'
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
westPanel,
{
region:'center',
margins:'5 5 5 0',
html: 'Center region'
},
myBox
]
});

});
</script>
<title>Testing ExtJS</title>
</head>

<body>
<div id="my-heading" style="height: 30px; color: #090; background-color: #CCC;">
This is my custom heading displayed in a box component
</div>
</body>
</html>

Condor
14 Dec 2010, 11:57 PM
That's because of the general style rule:

.x-tab-strip a, .x-tab-strip span, .x-tab-strip em {
display:block;
}
which should probably be more selective:

.x-tab-strip a.x-tab-strip-close, .x-tab-strip a.x-tab-right, .x-tab-strip span.x-tab-strip-inner, .x-tab-strip span.x-tab-strip-text, .x-tab-strip em.x-tab-left {
display:block;
}