Search and Top Navigation
#6796 closed bug (fixed)
Opened December 31, 2010 10:42PM UTC
Closed May 13, 2011 12:44AM UTC
Last modified September 06, 2011 02:56PM UTC
jQueryui - buttonset on rtl
| Reported by: | oferwald | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.8.14 |
| Component: | ui.button | Version: | 1.8.7 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If you attempt using a buttonset on a document or element which has dir="rtl" the wrong corners will be selected
Just add <html dir="rtl"> to the existing demo pages to see the problem.
Attachments (0)
Change History (13)
Changed January 03, 2011 02:21PM UTC by comment:1
| description: | If you attempt using a buttonset on a document or element which has dir="rtl" the wrong corners will be selected \ \ Just see the code here (demo code for button set, only one change - bolded) \ \ <html '''dir="rtl"'''> \ \ {{{ \ <!DOCTYPE html> \ <html dir="rtl"> \ <head> \ <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> \ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> \ <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> \ \ <script> \ $(document).ready(function() { \ $("#radio").buttonset(); \ }); \ </script> \ </head> \ <body style="font-size:62.5%;"> \ \ <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> \ \ </body> \ </html> \ }}} \ → If you attempt using a buttonset on a document or element which has dir="rtl" the wrong corners will be selected \ \ Just add <html dir="rtl">to the existing demo pages to see the problem. |
|---|---|
| status: | new → open |
Changed January 03, 2011 02:22PM UTC by comment:2
| description: | If you attempt using a buttonset on a document or element which has dir="rtl" the wrong corners will be selected \ \ Just add <html dir="rtl">to the existing demo pages to see the problem. → If you attempt using a buttonset on a document or element which has dir="rtl" the wrong corners will be selected \ \ Just add <html dir="rtl"> to the existing demo pages to see the problem. |
|---|
Changed May 12, 2011 01:02PM UTC by comment:3
Fix provided here: https://github.com/jquery/jquery-ui/pull/257 (Unit test included)
Demo of fix here: http://jsbin.com/arubu5/5
Changed May 12, 2011 09:32PM UTC by comment:4
I can confirm the fix ;) thanks. How about setting the milestone to 1.8.xx?
Changed May 13, 2011 12:44AM UTC by comment:5
Changed May 13, 2011 12:44AM UTC by comment:6
Button: Added rtl detection so corner classes would properly be applied to buttonsets. Fixed #6796. jQueryui - buttonset on rtl
(cherry picked from commit 50a4186ef949ecaf7ab4977048160820587218d2)
Changeset: 15cb56726f8b05be40dd7dc6590cef017cd8e953
Changed May 13, 2011 12:45AM UTC by comment:7
| milestone: | 1.9 → 1.8.14 |
|---|
Changed July 21, 2011 09:02AM UTC by comment:8
I'd just like to point out a small problem with this patch. It seems in Chrome that when calling .css('direction') on an element not added to the DOM, nothing is returned. So when calling buttonset on an element and then adding it to the DOM, the rounded corners are on the wrong side.
Should I only be calling buttonset on elements already in the DOM? Or is this a bug in jQuery?
Changed August 17, 2011 04:21PM UTC by comment:10
Replying to [comment:8 lee.b]:
I'd just like to point out a small problem with this patch. It seems in Chrome that when calling .css('direction') on an element not added to the DOM, nothing is returned. So when calling buttonset on an element and then adding it to the DOM, the rounded corners are on the wrong side. Should I only be calling buttonset on elements already in the DOM? Or is this a bug in jQuery?
Chrome reports the direction just fine. You're probably relying on rules defined in stylesheets to set the direction (which aren't applied because your element isn't in the DOM). Also, your test case doesn't show anything with direction.
Changed September 01, 2011 12:45PM UTC by comment:11
Replying to [comment:10 scott.gonzalez]:
Replying to [comment:8 lee.b]: > I'd just like to point out a small problem with this patch. It seems in Chrome that when calling .css('direction') on an element not added to the DOM, nothing is returned. So when calling buttonset on an element and then adding it to the DOM, the rounded corners are on the wrong side. > > Should I only be calling buttonset on elements already in the DOM? Or is this a bug in jQuery? Chrome reports the direction just fine. You're probably relying on rules defined in stylesheets to set the direction (which aren't applied because your element isn't in the DOM). Also, your test case doesn't show anything with direction.
Inspect the labels; test1 has a class of ui-corner-right and test2 has a class of ui-corner-left.
Changed September 01, 2011 12:56PM UTC by comment:12
Changed September 06, 2011 02:56PM UTC by comment:13
Replying to [comment:12 lee.b]:
jQuery 1.6.2 + jQuery UI 1.8.14 compared to jQuery 1.5.2 + jQuery UI 1.8.9
Sorry, I thought you were referring to buttons that were RTL but disconnected. I've created #7697 to track this. Thanks.