search

PolymerElements / paper-radio-button

A Material Design radio button
https://webcomponents.org/element/PolymerElements/paper-radio-button
19 stars 24 forks source link

RTL overlapping ripple with label text #108

Closed tjsavage closed 7 years ago

tjsavage commented 7 years ago

This is currently a bug in Chromium on the new md-settings page. For detailed info & repro, see: https://bugs.chromium.org/p/chromium/issues/detail?id=674826

Description

In an RTL context, the ripple can overlap with the label text.

Expected outcome

Same as LTR - there is adequate spacing between label and ripple.

Actual outcome

There isn't any space between the button and the label text.

Browsers Affected

t-soares commented 7 years ago

The new md-settings page is not setting the HTML dir attribute. It is only setting the CSS direction property to RTL. The radio-button is using the following CSS selector to identify the page directionality: :host-context([dir="rtl"]) It relies on the HTML dir attribute to identify the page directionality. Others md-settings pages also sets the dir attribute. So, I think it is a matter of setting the dir attribute on the pages that are not doing that.

tjsavage commented 7 years ago

Ah yes! Good catch! Thank you. Closing here for now.