#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:
Description

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

or

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: new → pending

Please provide a reduced test case showing this problem.

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

status: pending → new

Slightly altered example from official site:

test.html:

<html>
	<head>
		<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>
	</head>
	<body>
	<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">
			<input type="text" value="TEST TEST TEST" class="custom_css"/>
		</div>
		<div id="tabs-2">
			<p>Morbi tincidunt</p>
		</div>
		<div id="tabs-3">
			<p>Mauris eleifend est et turpis.</p>
		</div>
	</div>
	<SCRIPT type="text/javascript">
		$(document).ready(function() {
			$( "#tabs" ).tabs();
		});
	</script>
	</body>
</html>

custom.css:

.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: new → closed

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;
}

or

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

or

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

Example: http://jsbin.com/iniqem/edit