codemirror/autocomplete
1
0
Fork 0
Code Pull requests Activity

Set box-sizing for border-box universal styles #15

Merged
karlhorky merged 1 commit from patch-1 into main 2022-11-17 14:20:27 +01:00
Conversation 3 Commits 1 Files changed 1 +2 -1
karlhorky commented 2022-11-16 22:57:56 +01:00 (Migrated from github.com)
Copy link

When a universal CSS selector applies box-sizing: border-box; (which is a common pattern in CSS and commonly included in resets), the styling on the autocomplete icon is a bit broken:

box-sizing: border-box, key icon overlapping with text:

Screenshot 2022-11-16 at 22 25 05

box-sizing: content-box, key icon not overlapping with text:

Screenshot 2022-11-16 at 22 24 51

This PR ensures that the autocomplete icon will use the correct box sizing.

See also https://github.com/uiwjs/react-codemirror/issues/411, which this PR would resolve.

When a universal CSS selector applies `box-sizing: border-box;` (which is a common pattern in CSS and commonly included in resets), the styling on the autocomplete icon is a bit broken: `box-sizing: border-box`, key icon overlapping with text: <img width="249" alt="Screenshot 2022-11-16 at 22 25 05" src="https://user-images.githubusercontent.com/1935696/202297706-9a7298bd-814f-41bc-9cd6-1971e5d6defb.png"> `box-sizing: content-box`, key icon not overlapping with text: <img width="249" alt="Screenshot 2022-11-16 at 22 24 51" src="https://user-images.githubusercontent.com/1935696/202297716-4bdffb11-5fb7-479d-adbe-4e5239c2889f.png"> This PR ensures that the autocomplete icon will use the correct box sizing. See also https://github.com/uiwjs/react-codemirror/issues/411, which this PR would resolve.
karlhorky commented 2022-11-17 09:45:07 +01:00 (Migrated from github.com)
Copy link

An alternative to this would be to use CSS properties for the sizing that behave the same in both box models...

An alternative to this would be to use CSS properties for the sizing that behave the same in both box models...
marijnh commented 2022-11-17 14:20:46 +01:00 (Migrated from github.com)
Copy link

Merged, thanks.

Merged, thanks.
karlhorky commented 2022-11-17 15:41:19 +01:00 (Migrated from github.com)
Copy link

Glad to help, thanks for the merge! Will this be published as a part of @codemirror/autocomplete@6.3.3?

Glad to help, thanks for the merge! Will this be published as a part of `@codemirror/autocomplete@6.3.3`?
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
codemirror/autocomplete!15
No description provided.