Last modified: 2013-07-18 13:12:31 UTC

Wikimedia Bugzilla is closed!

Wikimedia migrated from Bugzilla to Phabricator. Bug reports are handled in Wikimedia Phabricator.
This static website is read-only and for historical purposes. It is not possible to log in and except for displaying bug reports and their history, links might be broken. See T34687, the corresponding Phabricator task for complete and up-to-date bug report information.
Bug 32687 - jquery UI buttonset in Vector Skin does not show up as a "set"
jquery UI buttonset in Vector Skin does not show up as a "set"
Status: RESOLVED FIXED
Product: MediaWiki
Classification: Unclassified
JavaScript (Other open bugs)
unspecified
All All
: Low minor (vote)
: ---
Assigned To: Rainer Rillke @commons.wikimedia
:
Depends on:
Blocks: 44881
  Show dependency treegraph
 
Reported: 2011-11-28 17:58 UTC by Rainer Rillke @commons.wikimedia
Modified: 2013-07-18 13:12 UTC (History)
3 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---


Attachments
Screenshot of the "buttonset" in Firefox 22 (16.60 KB, image/png)
2013-07-18 06:09 UTC, Rainer Rillke @commons.wikimedia
Details
Screenshot of the "buttonset" in Opera/9.80 Presto/2.12.388 Version/12.15 (Core 2.12.388) (16.35 KB, image/png)
2013-07-18 06:13 UTC, Rainer Rillke @commons.wikimedia
Details
Screenshot of the "buttonset" in IE 10 (17.52 KB, image/png)
2013-07-18 06:19 UTC, Rainer Rillke @commons.wikimedia
Details
Screenshot of the "buttonset" in Chromium 27 (36.67 KB, image/png)
2013-07-18 07:38 UTC, Rainer Rillke @commons.wikimedia
Details

Description Rainer Rillke @commons.wikimedia 2011-11-28 17:58:05 UTC
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(); });
Comment 1 Rainer Rillke @commons.wikimedia 2012-08-16 13:13:23 UTC
Maybe fixed now. But it might be also just a race condition how CSS is loaded and applied.
Comment 2 Rainer Rillke @commons.wikimedia 2013-07-18 06:09:17 UTC
Created attachment 12876 [details]
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
Comment 3 Rainer Rillke @commons.wikimedia 2013-07-18 06:13:50 UTC
Created attachment 12877 [details]
Screenshot of the "buttonset" in Opera/9.80 Presto/2.12.388 Version/12.15 (Core 2.12.388)
Comment 4 Rainer Rillke @commons.wikimedia 2013-07-18 06:19:29 UTC
Created attachment 12878 [details]
Screenshot of the "buttonset" in IE 10
Comment 5 Rainer Rillke @commons.wikimedia 2013-07-18 07:38:31 UTC
Created attachment 12880 [details]
Screenshot of the "buttonset" in Chromium 27
Comment 6 Gerrit Notification Bot 2013-07-18 08:07:58 UTC
Change 74328 had a related patch set uploaded by Rillke:
Removing space between buttons in Buttonset in Vector

https://gerrit.wikimedia.org/r/74328
Comment 7 Gerrit Notification Bot 2013-07-18 13:12:31 UTC
Change 74328 merged by jenkins-bot:
Removing space between buttons in Buttonset in Vector

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

Note You need to log in before you can comment on or make changes to this bug.


Navigation
Links