Opened 3 months ago

Closed 2 months ago

#35799 closed Bug (fixed)

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: Ready for checkin
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 3 months ago.
image-20240928-004727.png (57.8 KB ) - added by Sarah Boyce 3 months ago.
admin-rtl-support.png (54.9 KB ) - added by Mario Munoz 3 months ago.

Download all attachments as: .zip

Change History (8)

by Sarah Boyce, 3 months ago

Attachment: image-20240928-004631.png added

by Sarah Boyce, 3 months ago

Attachment: image-20240928-004727.png added

comment:1 by Sarah Boyce, 3 months 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, 3 months 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 3 months ago by Mario Munoz (previous) (diff)

by Mario Munoz, 3 months ago

Attachment: admin-rtl-support.png added

comment:3 by Mario Munoz, 3 months ago

Has patch: set

comment:4 by Sarah Boyce, 2 months ago

Triage Stage: AcceptedReady for checkin

comment:5 by Sarah Boyce <42296566+sarahboyce@…>, 2 months ago

Resolution: fixed
Status: assignedclosed

In ef56e1f:

Fixed #35799 -- Fixed the positioning of the inline admin plus icon for RTL languages.

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