Opened 12 years ago

Closed 12 years ago

Last modified 11 years ago

#6881 closed defect (fixed)

RTL CSS files interfere w/each other

Reported by: bill Owned by: bill
Priority: high Milestone: 1.2
Component: Dijit Version: 1.1.1
Keywords: Cc:
Blocked By: Blocking:

Description

The selectors in files like tundra/Calendar_rtl.css affect all widgets on the page, not just widgets underneath a class="tundra" node. They are missing a ".tundra" part of the selector. Ex:

.dijitRtl .dijitCalendarIncrease {
	background-position: 0px top;
}

This makes it impossible to have multiple themes on a page and support RTL mode at the same time.

The problem is that both the "dijitRtl" class and the "tundra" class are on the <body> tag, in order to allow rules referencing browser type like this (where browser is specified on the <html> node):

.dj_ie6 .dijitRtl .dijitCalendarIncrease {
	background-position: 0px top;
}

Possible solutions:

  • set a composite classname on <html> like "dj_ie6-rtl", rather than setting .dijitRtl on <body>
  • set dijitRtl on <html> rather than (or in addition to) <body>

There's a lot of cruft in the RTL files that can be removed given the use of sprite images etc. so may be able to get rid of all RTL rules referencing browser type.

Change History (7)

comment:1 Changed 12 years ago by bill

(In [13881]) Fix arrow direction on Calendar in RTL mode for tundra theme, and simplify Calendar CSS for all themes.

Refs #6881

comment:2 Changed 12 years ago by bill

Cleaned up Dialog/Tooltip? RTL CSS in [13875], [13876].

comment:3 Changed 12 years ago by bill

[13882] is the start of cleanup for TabContainer?, but it needs a lot more work.

comment:4 Changed 12 years ago by bill

(In [13910]) Put dijitRtl on <html> rather than <body>, and also put combination class names on <html> like dj_ie6-rtl to indicate combination of browser and text direction. Refs #6881.

comment:5 Changed 12 years ago by bill

Resolution: fixed
Status: newclosed

(In [13911]) Add theme name to every selector in the *_rtl.css files so that themes don't interfere with each other, even in RTL mode. Fixes #6881

comment:6 Changed 11 years ago by bill

(In [14068]) Fix regression from [13911] where close icon wouldn't show up for safari in RTL mode. Refs #6881. Ideally we would only be using absolute positioning of the close icon for left/right aligned tabs (for top/bottom we can use static positioning, standard page flow), but this seems to fix the immediate display issue.

comment:7 Changed 11 years ago by bill

Milestone: 1.2

marking tickets closed in the last three months w/blank milestone to milestone 1.2.

Note: See TracTickets for help on using tickets.