How to make jQuery UI tabs appear at the bottom of a page

jquery, jquery-ui, jquery-ui-tabs, tabs

Solution

Unfortunately the 'tabs below content' example is no longer present in the jQuery documentation, so you can use the following CSS to reposition your jQuery UI tab controls:

#tabs { 
    position: relative; 
    padding-bottom: 3em; 
} 
#tabs .ui-tabs-nav { 
    position: absolute; 
    left: 0.25em; 
    right: 0.25em; 
    bottom: 0.25em; 
    padding: 0em 0.2em 0.2em; 
} 
#tabs .ui-tabs-nav li { 
    border-top: none; 
    border-bottom: 1px solid #ccc; 
    -moz-border-radius: 0px 0px 4px 4px; 
    -webkit-border-radius: 0px 0px 4px 4px; 
    border-radius: 0px 0px 4px 4px; 
} 
#tabs .ui-tabs-nav li.ui-tabs-selected, 
#tabs .ui-tabs-nav li.ui-state-active { 
    top: -1px; 
}

This will position the tabs on the bottom on your `#tabs` container. If you want to keep a static height you can give your `#tabs` container a height value.

Note: the above CSS was adapted from Keith Wood's example.

Problem

Is there some way to make the jQuery UI tab widget tabs appear at the bottom of a page? Using the example from the jQuery site: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery UI Tabs - Default functionality</title> <link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="../../ui/jquery.ui.tabs.js"></script> <link type="text/css" href="../demos.css" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#tabs").tabs(); }); </script> </head> <body> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Blah</p> </div> <div id="tabs-2"> <p>More blah</p> </div> <div id="tabs-3"> <p>The return of blah</p> </div> </div> </div><!-- End demo --> <div class="demo-description"> <p>Click tabs to swap between content that is broken into logical sections.</p> </div><!-- End demo-description --> </body> </html> ``` The tabs appear at the top, which is normal, but I'd like to do a spreadsheet application, so the tabs should appear at the bottom. Thank you in advance.

Original source