Skip to main content

Search and Top Navigation

#7657 closed bug (notabug)

Opened August 19, 2011 02:57PM UTC

Closed August 22, 2011 11:41AM UTC

.tabs() assigns unnessesery .ui_widget class

Reported by: asdqwezx Owned by: asdqwezx
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.15
Keywords: Cc:
Blocked by: Blocking:

After initializing tabs with ".tabs()" call <input> fields which inside <div>s representing tabs got ".ui_widget" class assigned to them. I believe this is wrong because:

1) it has not anything with creating tabs

2) it brokes styles of <input>s

".ui_widget input" from jquery-ui.css overrides initial styles of <input>s

PS current workarounds are ugly:

1) use !important in initial css styles


2) use removeClass() after .tabs() call

Attachments (0)
Change History (3)

Changed August 19, 2011 03:17PM UTC by scottgonzalez comment:1

owner: → asdqwezx
status: newpending

Please provide a reduced test case showing this problem.

Changed August 21, 2011 03:44PM UTC by asdqwezx comment:2

status: pendingnew

Slightly altered example from official site:


		<link rel="stylesheet" type="text/css" href="custom.css" />
		<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
		<SCRIPT type='text/javascript' src='jquery-min.js'></SCRIPT>
		<SCRIPT type='text/javascript' src='jquery-ui.min.js'></SCRIPT>
	<div id="tabs">
			<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>
		<div id="tabs-1">
			<input type="text" value="TEST TEST TEST" class="custom_css"/>
		<div id="tabs-2">
			<p>Morbi tincidunt</p>
		<div id="tabs-3">
			<p>Mauris eleifend est et turpis.</p>
	<SCRIPT type="text/javascript">
		$(document).ready(function() {
			$( "#tabs" ).tabs();


.custom_css {
	font-size: 48px;

Font size in input field is not nearly 48 pixels.

This happens because .tabs() adds "ui-widget" class to <div id="tabs">.

Then <div id="tabs-N"> divs inherits "ui-widget" class.

And rule ".ui-widget input" from jquery-ui.css overrides "custom_css".

PS another ugly workaround is to set style directly by "style" attribute

Changed August 22, 2011 11:41AM UTC by rdworth comment:3

resolution: → invalid
status: newclosed

After initializing tabs with ".tabs()" call <input> fields which inside <div>s representing tabs got ".ui_widget" class assigned to them.

The <input> fields do not get the "ui-widget" class assigned to them, though they will get some styles because they're inside a div that has the "ui-widget" class.

The ui-widget class being added to the tabs element is neither a bug nor is it unnecessary. Your .custom_css selector is simply less specific than the ".ui-widget input" one in the jquery-ui.css. That's why it's being overridden. Change it to

.ui-widget .custom_css {
  font-size: 48px;


.ui-tabs .custom_css {
  font-size: 48px;


#tabs .custom_css {
  font-size: 48px;