Page MenuHomePhabricator

jquery UI buttonset in Vector Skin does not show up as a "set"
Closed, ResolvedPublic

Description

It should look like http://jqueryui.com/demos/button/#radio .

Using monobook theme it looks fine. In vector, however it looks like singe buttons.

To test it, you can insert the following html:

<div class="demo">
<form>
<div id="radio">

		<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
		<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
		<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>

</div>
</form>
</div><!-- End demo -->

And the followng JS:

mw.loader.using([
'jquery.ui.button'
], function(){ $( "#radio" ).buttonset(); });


Version: unspecified
Severity: minor

Details

Reference
bz32687

Event Timeline

bzimport raised the priority of this task from to Low.
bzimport set Reference to bz32687.
Rillke created this task.Nov 28 2011, 5:58 PM

Maybe fixed now. But it might be also just a race condition how CSS is loaded and applied.

Created attachment 12876
Screenshot of the "buttonset" in Firefox 22

Only "fixed" if you have no space between the <option>s because they are display:inline-block -- otherwise a tiny space remains.

Since padding of the content of the button is 1em, it is save to set the margin from -0.3em to -0.4em

Attached:

Created attachment 12877
Screenshot of the "buttonset" in Opera/9.80 Presto/2.12.388 Version/12.15 (Core 2.12.388)

Attached:

Created attachment 12878
Screenshot of the "buttonset" in IE 10

Attached:

Created attachment 12880
Screenshot of the "buttonset" in Chromium 27

Attached:

Change 74328 had a related patch set uploaded by Rillke:
Removing space between buttons in Buttonset in Vector

https://gerrit.wikimedia.org/r/74328

Change 74328 merged by jenkins-bot:
Removing space between buttons in Buttonset in Vector

https://gerrit.wikimedia.org/r/74328