Multiple HTML Elements on jQuery UI Tab - jquery-ui

Question

I'm using jQueryUI Tabs and have a requirement to add UI elements to each tab that allow a user to Edit information about the tab, or remove the tab.
The markup I use on the <li> for a given tab looks like this:
<li>
<div style="background-color:Red;"> <-- Red to see what's happening -->
<span>Tab One</span>
<div style="text-align:right; margin-right:3px;">
<div><span id="editTab-1">edit</span></div>
<div><span id="delTab-1">X</span></div>
</div>
</div>
</li>
This renders just as I would hope in IE
______________________________
| Edit|
| Tab One |
|___________________________X__|
but it does not render properly in Chrome or FireFox (the tab is only wide enough for the "Tab One" text, and "Edit" / "X" are mostly "under" the tab (lower Z-Index apparently).
What is a compatible way to achieve my goal?

Answer 1

I'm not sure if this is what you were intending or not, as I haven't tested in IE, but this works in Chrome and FF:
<div id="tabs">
<ul style="cursor:pointer">
<li>
<a href="#tabs-1">
<div style="float: left; margin-right: 20px;">Tab One</div>
<div style="float: right; text-align:right;">
<div id="editTab-1">edit</div>
<div id="delTab-1">X</div>
</div>
</a>
</li>
<li>
<a href="#tabs-2">
<div style="float: left; margin-right: 20px;">Tab Two</div>
<div style="float: right; text-align:right;">
<div id="editTab-2">edit</div>
<div id="delTab-2">X</div>
</div>
</a>
</li>
</ul>
<div id="tabs-1" class="tabPane">Tab One Content</div>
<div id="tabs-2" class="tabPane">Tab Two Content</div>
</div>
See the working jsFiddle
If you want to handle the clicks dynamically, you could use:
var $tabs = $("#tabs").tabs();
$tabs.find("a div[id]").on("click", function() {
var id = $(this).attr("id"),
idTab = parseInt(id.substring(id.length - 1)),
isEdit = id.indexOf("edit") > -1,
isDelete = id.indexOf("del") > -1,
index = $tabs.tabs('option', 'selected');
if (index + 1 === idTab) {
if (isEdit) {
console.log("Edit Tab " + (index+1));
//however you want to edit here
}
if (isDelete) {
console.log("Delete Tab " + (index+1));
$tabs.tabs("remove", index);
}
}
}).css("cursor", "pointer");​
See the working jsFiddle

Answer 2

The problem, I think, stems from the fact that the tab <li> and then the <a> inside are floating elements, as designed in the jQueryUI CSS.
The technical part can best be summed up with this quote (from http://css.maxdesign.com.au/floatutorial/introduction.htm)
If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.
So the red <div> is shrinking to the widest element - the <a>. IE and Firefox/Chrome are simply behaving differently, just their interpretation of the specifications. To be honest, that fact that Firefox and Chrome are similar and IE has had a long history of float bugs I'd side with Mozilla/Google here although can appreciate that IE seems to be behaving nicer in this instance.
You can solve the problem by simply setting a width on the red <div>. However the markup could also be a bit cleaner, for example:
<li style="background-color:red;width:150px">
Tab One
<div id="editTab-1" style="text-align:right;margin-right:3px">edit
<p id="delTab-1">X</p>
</div>
</li>
gives the same result.