Opened 8 years ago

Closed 8 years ago

#7657 closed bug (notabug)

.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

Change History (3)

comment:1 Changed 8 years ago by Scott González

Owner: set to asdqwezx
Status: newpending

Please provide a reduced test case showing this problem.

comment:2 Changed 8 years ago by asdqwezx

Status: pendingnew

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

comment:3 Changed 8 years ago by rdworth

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

or

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

or

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

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

Note: See TracTickets for help on using tickets.