jQuery UI Dialog in Tabs Using

Question

Hi There,

I use jQuery UI Tabs. Tabs in the dialog with the windows opened, but the UI plug-in does not work properly.

The tabs need to be side by side. Unfortunately we could not get the result.

<div id="tabs">
<ul>
<li><a href="#tabs-1">tab 1</a></li>
<li><a href="#tabs-1">tab 2</a></li>
<li><a href="#tabs-1">tab 3</a></li>
</ul>
<div id="tabs-1"></div>
</div> 

Answer 1

You have to call tabs() to initialize the widget:

$("#tabs").tabs();

If you have done that, then the only thing I can think of is there is problem with putting widgets in other widgets.

Answer 2

Your code as you've posted in comments works, you can test it here. It seems most likely that you're having a CSS issue, check the following things:

• If you upgraded jQuery UI, make sure you updated the CSS, it changes each release as well
• If you have additional CSS, see which style rule is interfering with an inspector like Firebug or Chrome, some additional selector match may be applying some unwanted styling here.

Answer 3

I also think it's a CSS issue, you are starting a second div ID without closing the first one. Did you mean to nest both tab groups? If so the other thing that can make them not stay in a line side by side, is if their container div is not large enough or has padding interfering with the tabs.