I have a problem with jQueryUi tabs. I want to have a navigation bar on the left side of my tab view, but the layout does not work. I think this is a mistake and I will report it in jQuery, but first I want to find out if you can confirm this to be a mistake, or am I doing something wrong?
Preview my example in [ http://public.virtualmischa.de/bugs/jqueryui-tabslayout.html ].
First you see an example of non-working tabs and below an example of a working floating div.
<!DOCTYPE html> <html> <head> <title>JQuery Tablayout problems</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#tabs").tabs(); }); </script> </head> <body> <div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div> <div id="tabs"><ul><li><a href="#a1">A tab page</a></li></ul> <div id="a1">Do you see a red bar left of this tab view?</a></div> </div> <div style="float:clear"></div> <div style="float:left; width:200; color: red;height: 200px;">Where is my left bar?<br></div> <div id="no-tabs"><ul><li><a href="#a2">A tab page</a></li></ul> <div id="a2">Do you see a red bar left of this tab view?</a></div> </div> </body> </html>
source share