Due to border radius design in Views UI, Drop Buttons do not appear correctly when using views_ui in an RTL language. See screenshot
Border-radius should be inverted when switching page direction.
Border Radius issue in RTL

CommentFileSizeAuthor
#5 views_ui_dropbuttons_rtl_border_radius-2287381-5.patch984 bytesalayham
#2 Frontpage_view_d8_dropbutton_border_radius_patched.png16.02 KBalayham
#1 views_ui_dropbuttons_rtl_border_radius-2287381-1.patch743 bytesalayham
views_ui_dripbuttons_rtl_border-radius.png15.83 KBalayham
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

alayham’s picture

alayham CreditAttribution: alayham commented
Priority: Normal » Minor
Status: Active » Needs review
FileSize
views_ui_dropbuttons_rtl_border_radius-2287381-1.patch743 bytes

patch to fix dropbutton border-radius in RTL languages

alayham’s picture

alayham CreditAttribution: alayham commented
FileSize
Frontpage_view_d8_dropbutton_border_radius_patched.png16.02 KB

the frontpage view after the patch

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented
Status: Needs review » Reviewed & tested by the community

much better

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Needs work 
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -1136,6 +1136,12 @@ div.messages {
+[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
+  border-radius: 0 1.1em 0 0;
+}
+[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
+  border-radius: 0 0 1.1em 0;
+}

The corresponding left-to-right css needs a comment. For example:

.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a {
  border-radius: 1.1em 0 0 0; /* LTR */
}
.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a {
  border-radius: 0 0 0 1.1em; /* LTR */
}
alayham’s picture

alayham CreditAttribution: alayham commented
FileSize
views_ui_dropbuttons_rtl_border_radius-2287381-5.patch984 bytes

Thank you for the corrections. Here is the updated patch

alayham’s picture

alayham CreditAttribution: alayham commented
Status: Needs work » Needs review
dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented
Status: Needs review » Reviewed & tested by the community

alex +1

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
CreditAttribution: alexpott commented
Status: Reviewed & tested by the community » Fixed

Committed 4f8cf70 and pushed to 8.x. Thanks!

  • alexpott committed 4f8cf70 on 8.x 
    Issue #2287381 by alayham: Fixed views_ui dropbuttons display is not RTL...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.