In /modules/system/system.theme.css:

.fieldset-legend span.summary {
  color: #999;
  font-size: 0.9em;
  margin-left: 0.5em;
}

There is no corresponding entry for .fieldset-legend span.summary in system.theme-rtl.css which causes the margin-left to persist in a RTL environment. This causes a minor overlap of the text onto the collapse background icon.

I propose the following - In /modules/system/system.theme-rtl.css
After: 

/**
 * Collapsible fieldsets.
 */
html.js fieldset.collapsible .fieldset-legend {
  background-position: 98% 75%;
  padding-left: 0;
  padding-right: 15px;
}
html.js fieldset.collapsed .fieldset-legend {
  background-image: url(../../misc/menu-collapsed-rtl.png);
  background-position: 98% 50%;
}

Add:

.fieldset-legend span.summary {
  margin-left: 0;
  margin-right: 0.5em;
}

Comments

Kristen Pol’s picture

Kristen Pol
she/her
Primary language English
Location Santa Cruz, CA, USA
CreditAttribution: Kristen Pol commented
Component: system.module » CSS
Kristen Pol’s picture

Kristen Pol
she/her
Primary language English
Location Santa Cruz, CA, USA
CreditAttribution: Kristen Pol commented
Component: CSS » system.module
Kristen Pol’s picture

Kristen Pol
she/her
Primary language English
Location Santa Cruz, CA, USA
CreditAttribution: Kristen Pol commented
Assigned: Unassigned » Kristen Pol
Kristen Pol’s picture

Kristen Pol
she/her
Primary language English
Location Santa Cruz, CA, USA
CreditAttribution: Kristen Pol commented
Assigned: Kristen Pol » Unassigned
Status: Active » Postponed (maintainer needs more info)

There is not enough information to reproduce. Please provide:

1) Which page(s) you saw the overlap.

2) A screenshot of the issue.

3) Steps to reproduce.

This is how I tried to reproduce (on Drupal 8):

  1. Installed fresh Drupal core
  2. Enabled Locale/Language modules
  3. Added Arabic and set as default language
  4. Clicked around site to see if any fieldsets looked weird
  5. Didn't see anything strange

It's possible this issue is only reproducible on Drupal 7 but, without the steps to reproduce, then it can't be tested.

Note that Bartik does have this overridden like:

.fieldset-legend span.summary {
  margin-left: 0;
}

Thanks,
Kristen

karenann’s picture

karenann CreditAttribution: karenann commented

I am still able to reproduce this but unable to post it publicly for confidentiality reasons.

However, I do have permission to share this in a one on one dialogue.

Message me anytime.

karenann’s picture

karenann CreditAttribution: karenann commented
Status: Postponed (maintainer needs more info) » Active

Here we go:

The scenario is a site which allows a user to switch between languages, with the default language being English (LTR). One such alternate language is Arabic, an RTL language. It is my experience that when a user switches to an RTL, "-rtl" versions of existing CSS files are read in where they compensate for the directional switch.

1. http://i46.tinypic.com/5v6lw.gif
Notice that the padding-left of 15px on .fieldset-legend houses the background-image nicely and the text does not infiltrate the padding. (from /modules/system/system.theme.css line 176)

2. http://i50.tinypic.com/2h4ht11.gif
Expanding .fieldset-legend to show the contents, inline elements, the second being span.summary. Notice the margin-left of 0.5em (from /modules/system/system.theme.css line 184)

3. http://i46.tinypic.com/20symo7.gif
Now, we are viewing that page in Arabic, switching from an LTR to an RTL language. You can see in the CSS that the padding-left of 15px is overridden as 0 and padding-right is set to 15px (from /modules/system/system.theme-rtl.css line 44). Notice that the text infiltrates the padded area.

4. http://i48.tinypic.com/t9gt9u.gif
Expanding .fieldset-legend to show the contents, inline elements, the second being span.summary. Notice the margin-left of 0.5em (from /modules/system/system.theme.css line 184). While the padding in the previous screenshot is overriden, this element's margin-left is not.

5. http://i49.tinypic.com/15exsly.gif
In firebug, I overrode the margin-left to 0 and added a margin-right to .5em. This results in the cessation of the text invading the padding displayed in the previous screenshot.

In keeping with patterns, I think the addition of the following in /modules/system/system.theme-rtl.css would be the most appropriate option:

.fieldset-legend span.summary {
  margin-left: 0;
  margin-right: 0.5em;
}

I'm interested to hear thoughts on this.

Version: 7.12 » 7.x-dev

Core issues are now filed against the dev versions where changes will be made. Document the specific release you are using in your issue comment. More information about choosing a version.