Skip to content

RTL bug in list padding #4732

@anisabboud

Description

@anisabboud

In RTL, quill adds double extraneous padding on the "end" side.

On the ol/ul:
Image


And on the li:
Image


This happens because the CSS in core.styl uses padding-left instead of padding-inline-start (logical properties):

ol
padding-left: 1.5em
li
list-style-type: none
padding-left: LIST_STYLE_OUTER_WIDTH


In the desktop screenshots above this might look like a minor/negligible issue, but when the font-size is set to 16px, that sums up to 24px + 24px of padding on the wrong side (plus 15px default padding around the ql-editor). On mobile that causes the lines to wrap too early, leaving almost half the screen empty and looks weird:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions