Ticket #6796 (closed bug: fixed)

Opened 4 years ago

Last modified 3 years ago

jQueryui - buttonset on rtl

Reported by: oferwald Owned by:
Priority: minor Milestone: 1.8.14
Component: ui.button Version: 1.8.7
Keywords: Cc:
Blocking: Blocked by:

Description (last modified by scott.gonzalez) (diff)

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.

Change History

comment:1 Changed 4 years ago by scott.gonzalez

  • Status changed from new to open
  • Description modified (diff)

comment:2 Changed 4 years ago by scott.gonzalez

  • Description modified (diff)

comment:3 Changed 3 years ago by dougneiner

Fix provided here:  https://github.com/jquery/jquery-ui/pull/257 (Unit test included)

Demo of fix here:  http://jsbin.com/arubu5/5

comment:4 Changed 3 years ago by oferwald

I can confirm the fix ;) thanks. How about setting the milestone to 1.8.xx?

comment:5 Changed 3 years ago by Scott González

  • Status changed from open to closed
  • Resolution set to fixed

Merge pull request #257 from dcneiner/buttonset-rtl

Fixed #6796

Changeset: 523790b111558d88b83d23e5b3f5c65a58b7dae5

comment:6 Changed 3 years ago by Doug Neiner

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

comment:7 Changed 3 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.14

comment:8 follow-up: ↓ 10 Changed 3 years ago by 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?

comment:9 Changed 3 years ago by lee.b

comment:10 in reply to: ↑ 8 ; follow-up: ↓ 11 Changed 3 years ago by scott.gonzalez

Replying to 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.

comment:11 in reply to: ↑ 10 Changed 3 years ago by lee.b

Replying to scott.gonzalez:

Replying to 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.

comment:13 in reply to: ↑ 12 Changed 3 years ago by scott.gonzalez

Replying to 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.

Note: See TracTickets for help on using tickets.