thepaperpilot/forgejo
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Absolute positioned checkboxes overlay floated elements (#26870) (#27366)

Browse source 
Backport #26870 by @rafh

Currently, checkboxes are positioned as absolute. This positioning
causes the input to overlay an element that has been floated within the
editor. Floated elements are useful if you want your text to wrap around
this element. This PR fixes the overlaying of checkboxes by removing the
absolute positioning, updating the `ul` padding, and
displaying`.task-list-item` `flex` to ensure inputs and the associated
label are on the same line.

Screenshots:

Before:
<img width="762" alt="Screenshot 2023-09-01 at 3 40 59 PM"
src="https://github.com/go-gitea/gitea/assets/6152817/570247c7-7f5c-4697-bfc9-ad4655e37991">

After:
<img width="762" alt="Screenshot 2023-09-01 at 3 42 20 PM"
src="https://github.com/go-gitea/gitea/assets/6152817/db53df45-1294-4eee-84c0-b21ac4fdf805">

Co-authored-by: Rafael Heard <rafael.heard@gmail.com>
Co-authored-by: rafh <rafaelheard@gmail.com>
This commit is contained in:
Giteabot 2023-09-30 23:10:48 +08:00 committed by GitHub
parent 006c15fb5f
commit 79c17d8b6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
web_src/css/markup/content.css
View file

@ -155,23 +155,29 @@
.markup .task-list-item { .markup .task-list-item {
list-style-type: none; list-style-type: none;
position: relative; }
line-height: 1.5rem;
min-height: 1.5rem; /* // to render a checkbox list without content `- [ ]`, we need this min-height to make sure the <li> can be visible */ .markup .task-list-item p + ul {
margin-top: 16px;
} }
.markup .task-list-item input[type="checkbox"] { .markup .task-list-item input[type="checkbox"] {
position: absolute; margin: 0 .3em .25em -1.4em;
top: 0.25em; vertical-align: middle;
left: -1.6em; padding: 0;
} }
.markup .task-list-item p { .markup .task-list-item input[type="checkbox"] + p {
line-height: 1.5rem; margin-left: -0.2em;
display: inline;
}
.markup .task-list-item > p {
margin-inline: 16px;
} }
.markup .task-list-item + .task-list-item { .markup .task-list-item + .task-list-item {
margin-top: 3px; margin-top: 4px;
} }
.markup input[type="checkbox"] { .markup input[type="checkbox"] {
@ -327,7 +333,7 @@
.markup img[align="left"], .markup img[align="left"],
.markup video[align="left"] { .markup video[align="left"] {
padding-right: 20px; padding-right: 28px;
} }
.markup .emoji { .markup .emoji {