Set all panels width to the width of the widest panel - html

Question

I have jquery tabs and i would like to make all panels width be the same as the widest panel width.
Something like heightStyle:"auto" works for height.
widthStyle:"auto" would be what im looking for, but it doesn't exist.
Comparison of how it looks vs how i would like it to look:
<div id="tabs" class="tab" >
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="f3">c<br>c<br>c<br>c<br>c<br>c<br></div>
</div>
<div style="clear:both">
</div>
<div id="tabs2" class="tab" >
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
<div id="f3">c<br>c<br>c<br>c<br>c<br>c<br></div>
</div>
<script>
$("#tabs").tabs({
heightStyle: "auto",
}).css("float", "left");
$("#tabs2").tabs({
heightStyle: "auto",
}).css("float", "left").width(485);
</script>
http://jsfiddle.net/knj73r9o/2/
I'd like to do it without hardcoding the width but automatically using the contents width. Is something like that possible?

Answer 1

To address this, you will want to iterate each panel and determine the largest width value. Since the width is collapsed, you have to also activate each panel. Something like this will help:
Example: https://jsfiddle.net/Twisty/knj73r9o/24/
JavaScript
$(function() {
function findMaxWidth($tab) {
var mw = 0;
var oInd = $tab.tabs("option", "active");
$tab.find(".ui-tabs-panel").each(function(ind, el) {
$tab.tabs("option", "activate", ind);
console.log("Activate Tab " + ind);
if ($(el).width() > mw) {
mw = $(this).width();
console.log("Tab " + ind + " Width: " + mw + "px");
}
});
$tab.tabs("option", "active", oInd);
return mw;
}
$("#tabs").tabs({
heightStyle: "auto",
}).css("float", "left");
var widthStyle = findMaxWidth($("#tabs"));
$("#tabs div").each(function() {
$(this).css("width", widthStyle + "px");
});
$("#tabs2").tabs({
heightStyle: "auto",
}).css("float", "left").width(485);
});
Once you have the width, you can use .css() to set the width of each.
If you need to do this a lot, or on many items, consider using $.widget() to set your own widthStyle option or function.
Hope it helps.

Answer 2

You can use CSS and have the tabs expand to width of 100%. This would expand to the width of the parent container.
.tab{
width: 100%;
}