QueryUI Tabs: how to keep them on a single line?

QueryUI Tabs: how to keep them on a single line?

Hi!

I posted this question to stackoverflow (http://stackoverflow.com/questions/2749583/jqueryui-tabs-how-to-keep-them-on-a-single-line) but got no answer. No I will try directly at source!

Maybe my question is wired: is there a way to prevent jQueryUI tabs from floating if browser window is too small?

Explanation: I have a simple horizontal tab using CSS only. The content is floating but not the tabs. Important: there is no width set manually, the current width is taken automatically. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#tabs ul {
    white
-space: nowrap;
}
#tabs ul li {
    display
: inline;
    white
-space: nowrap;
}
</style>
<title>Tabs-CSS</title>
</head>
<body>


<div class="demo">
<div id="tabs">
    
<ul>
        
<li><a href="#tabs-1">Preloaded</a></li>
        
<li><a href="ajax/content1.html">Tab 1</a></li>
        
<li><a href="ajax/content2.html">Tab 2</a></li>
        
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    
</ul>
    
<div id="tabs-1">
        
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    
</div>
</div>
</div>


</body>
</html>


This is exactly what I want. Next step: add jQueryUI Tab as unobtrusive 
Javascript. The tabs should not wrap around if the window is too small! For example like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<style type="text/css">
#tabs ul {
    white
-space: nowrap;
}
#tabs ul li {
    display
: inline;
    white
-space: nowrap;
}
</style>
<title>Tabs-CSS</title>
</head>
<body>


<div class="demo">
<div id="tabs">
    
<ul>
        
<li><a href="#tabs-1">Preloaded</a></li>
        
<li><a href="ajax/content1.html">Tab 1</a></li>
        
<li><a href="ajax/content2.html">Tab 2</a></li>
        
<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        
<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    
</ul>
    
<div id="tabs-1">
        
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    
</div>
</div>
</div>


<script type="text/javascript">
//<![CDATA[
$
(function() {
    $
("#tabs").tabs({
        ajaxOptions
: {
            error
: function(xhr, status, index, anchor) {
                $
(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
            
},
        
}
    
});
});

$

(function() {
    $
("#innertabs").tabs({
        ajaxOptions
: {
            error
: function(xhr, status, index, anchor) {
                $
(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo.");
            
}
        
}
    
});
});
//]]>
</script>


</body>
</html>





Now I can see that the tabbar floats on minimizing the browser window. I did a lot of reading and searching but found nothing.

My main questions is: can I avoid floating the tabbar and keep all tabs on one single line?

Kind regards, Andi