Opened 34 hours ago

Last modified 12 hours ago

#35799 assigned Bug

Plus icon should be right of text for adding an inline item in admin for RTL support

Reported by: Mario Munoz Owned by: Mario Munoz
Component: contrib.admin Version: 5.0
Severity: Normal Keywords:
Cc: Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

When using an RTL language in the Django admin, the icon for the "add" item links should appear on the left, like it does on the nav sidebar.

However, when adding inline items from the main pane, the "+" icon appears on the left side, which is counter-intuitive.

The css applied to this item should match what is being used for the nav sidebar items.

Attachments (3)

image-20240928-004631.png (58.3 KB ) - added by Sarah Boyce 30 hours ago.
image-20240928-004727.png (57.8 KB ) - added by Sarah Boyce 30 hours ago.
admin-rtl-support.png (54.9 KB ) - added by Mario Munoz 13 hours ago.

Download all attachments as: .zip

Change History (6)

by Sarah Boyce, 30 hours ago

Attachment: image-20240928-004631.png added

by Sarah Boyce, 30 hours ago

Attachment: image-20240928-004727.png added

comment:1 by Sarah Boyce, 30 hours ago

Component: Internationalizationcontrib.admin
Summary: Switch icon to right side for adding inline item in admin for RTL supportPlus icon should be right of text for adding an inline item in admin for RTL support
Triage Stage: UnreviewedAccepted

LTR - Plus icon always left of the link text


RTL - Plus icon inconsistent and agree that it should always be on right of the text


comment:2 by Mario Munoz, 13 hours ago

There was no CSS class specified for the link created within the "add-row" element generated by the inline.js file. Also found duplication of the CSS that generates the icon for "addlink" icon. It was in both the base.css file as well as the forms.css file, although the forms.css also had a font-size property.

With no changes to the CSS, the addlink class had no effect on the affected element because of the duplication and CSS specificity rules. (The rule in forms.css had higher precedence.)

We standardized the usage of the addlink class by removing the css rule in forms.css for tabular and stacked elements. There was an additional property set for ul elements, but that is being addressed in ticket #35804.

By removing the css rules in forms.css and adding the class addlink class in the affected element, it is now displaying correctly, and should be easier to maintain in the future.

See screenshot for fix.


Last edited 13 hours ago by Mario Munoz (previous) (diff)

by Mario Munoz, 13 hours ago

Attachment: admin-rtl-support.png added

comment:3 by Mario Munoz, 12 hours ago

Has patch: set
Note: See TracTickets for help on using tickets.
Back to Top