Absolute positioned checkboxes overlay floated elements #26870

rafh · 2023-09-01T19:47:32Z

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:

After:

silverwind · 2023-09-01T23:30:45Z

We need to be careful around markdown rendering to stay compatible with GitHub's rendering. Could you post your sample markdown document here so we can compare this and GitHub's solution (assuming they have fixed it).

rafh · 2023-09-04T19:34:09Z

Here's an example of my markdown. When an image is aligned left or right the following CSS is applied by GitHub

img[Attributes Style] {
    float: left;
    vertical-align: top;
    width: 200px;
}

example checkbox

kdumontnu

For traceability, it looks likes this regression was introduced in #17395

I added a bit of a stress-test to compare and it looks like a marked improvement:

Here is some base text
- [ ] One
- [ ] 

<img align="left" width="300" height="200" src="https://gitea.com/assets/img/logo.svg">

- [ ] Two
- [ ] Three
- [ ] Four
- [ ] 

More text


#### dense list
- [ ] foo
- [ ] barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
- [ ] baz

#### not so dense list
- [ ] foo

- [ ] barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
- [ ] second item

- [ ] baz

rafh · 2023-09-06T20:39:11Z

This is the associated markdown for this comment:

<img  align="left" alt="" width="200" src="/assets/6152817/d0b0b99a-db2b-4b6d-946d-277bfd24fc11">
* [ ]   example checkbox

Here's an example of my markdown. When an image is aligned left or right the following CSS is applied by GitHub
img[Attributes Style] {
    float: left;
    vertical-align: top;
    width: 200px;
}
example checkbox

kdumontnu · 2023-09-07T13:32:51Z

web_src/css/markup/content.css

@@ -144,7 +144,7 @@

 .markup ul,
 .markup ol {
-  padding-left: 2em;
+  padding-left: 0;


@rafh I'm worried about this style affecting other elements unrelated to checkboxes. Are there other markdown ul ol items this will apply to in markdown (I assume yes)?

Especially because this value was not changed here: https://github.com/go-gitea/gitea/pull/17411/files

(btw, this is an area front-end testing could validate)

@kdumontnu I understand your point. Instead, we should change the em back to 2em and update the .task-list-item to have margin-left: -2em;. This will ensure that all checkboxes are aligned properly without impacting all ol and ul.

Here's an example of the markup and how it is rendered within Gitea.

- [x] example content <img align="left" alt="" width="200" src="https://user-images.githubusercontent.com/6152817/265531274-d0b0b99a-db2b-4b6d-946d-277bfd24fc11.jpg"> - [x] example content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed efficitur orci, eu cursus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed efficitur orci, eu cursus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed efficitur orci, eu cursus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed efficitur orci, eu cursus sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed efficitur orci, eu cursus sapien. <img style="clear: both" alt="" width="200" src="https://user-images.githubusercontent.com/6152817/265531274-d0b0b99a-db2b-4b6d-946d-277bfd24fc11.jpg"> - [ ] one - [ ] two

That seems like a reasonable solution to me, or maybe you can add a :not(.task-list-item) to the selectors above and. Whatever will apply the style to the .task-list-item items, but not change the styling for other lists.

kdumontnu

See comment

kdumontnu

Looks good - one minor thing below you might want to address is that the spacing between non-dense checkboxes is greater than spacing between non-dense list items (code below)

Here is some base text
- [ ] One
- [ ] 

- Bullet
- Items

<img align="left" width="300" height="200" src="https://gitea.com/assets/img/logo.svg">

- [ ] Two
- [ ] Three
- [ ] Four
- [ ] 

More text


#### dense list
- [ ] foo
- [ ] barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
- [ ] baz

#### not so dense list
- [ ] foo

- [ ] barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
- [ ] second item

- [ ] baz

<img align="left" width="300" height="200" src="https://gitea.com/assets/img/logo.svg">

- bullet
- items

Here is some base text

One
[ ]
Bullet
Items

Two
Three
Four
[ ]

More text

dense list

foo
barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
baz

not so dense list

foo
barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
second item
baz

bullet
items

kdumontnu · 2023-09-12T18:33:23Z

@silverwind any other thoughts on this - seems like a clear improvement, and gets rid of the absolute positioning (which I'm sure is messing up some other rendering as well).

rafh · 2023-09-22T14:53:57Z

This is how GitHub renders the following markdown and how Gitea renders (edited to show latest commit changes)

Gitea(left) - GitHub(right)


- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur
 <img align="left" width="300" height="200" src="https://github.com/assets/6152817/d0b0b99a-db2b-4b6d-946d-277bfd24fc11">

- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

#### dense list
- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur
- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur
- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

 <img align="left" width="300" height="200" src="https://github.com/assets/6152817/d0b0b99a-db2b-4b6d-946d-277bfd24fc11">

#### not so dense list
- [ ] 1
- [ ] 2
- [ ] 3

delvh

I trust @kdumontnu's words that all potential regressions have been fixed.

wxiaoguang · 2023-09-28T01:03:22Z

I do no think this fix is right.

It breaks some more common layout like this:

* [ ] a
    * [ ] a1
    * [ ] a2
* [ ] b
* [ ] c
* [ ] d

----

* [ ] a
    * [ ] a1
    * [ ] a2

* [ ] b

kdumontnu · 2023-09-28T01:05:28Z

I do no think this fix is right.

It breaks some more common layout like this:
* [ ] a
    * [ ] a1
    * [ ] a2
* [ ] b
* [ ] c
* [ ] d

----

* [ ] a
    * [ ] a1
    * [ ] a2

* [ ] b

Thanks, good catch!

silverwind · 2023-09-28T18:57:56Z

Can we as a first step copy GitHub's CSS exactly to reproduce their rendering, and then improve upon it by adding the margin-left to the checkboxes so they are not "glued" to the image?

rafh · 2023-09-29T22:30:36Z

Can we as a first step copy GitHub's CSS exactly to reproduce their rendering, and then improve upon it by adding the margin-left to the checkboxes so they are not "glued" to the image?

I've applied the styling used by GitHub. I added more padding to left-aligned images. Otherwise, our checkboxes would lie directly next to the images.

Below I've consolidated all the markdown examples and added one more example at the top (empty checkboxes). I added this because the previous code had the following comment and I wanted to ensure this edge case was covered.

to render a checkbox list without content - [ ], we need this min-height to make sure the <li> can be visible

Empty Checkboxes
- [ ] 
- [ ] 

--- 

* [ ] a
    * [ ] a1
    * [ ] a2
* [ ] b
* [ ] c
* [ ] d

----

* [ ] a
    * [ ] a1
    * [ ] a2

* [ ] b


- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

 <img align="left" width="300" height="200" src="https://github.com/assets/6152817/d0b0b99a-db2b-4b6d-946d-277bfd24fc11">

- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

#### dense list
- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur
- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur
- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

- [ ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam velit ac metus vulputate egestas. Etiam ut enim iaculis, egestas mauris ac, convallis ex. Curabitur

 <img align="left" width="300" height="200" src="https://github.com/assets/6152817/d0b0b99a-db2b-4b6d-946d-277bfd24fc11">

#### not so dense list
- [ ] 1
- [ ] 2
- [ ] 3


Here is some base text
- [ ] One
- [ ] 

- Bullet
- Items

<img align="left" width="300" height="200" src="https://gitea.com/assets/img/logo.svg">

- [ ] Two
- [ ] Three
- [ ] Four
- [ ] 

More text


#### dense list
- [ ] foo
- [ ] barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
- [ ] baz

#### not so dense list
- [ ] foo

- [ ] barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbarbar barbarbarbarbarbarbar barbarbarbarbar
- [ ] second item

- [ ] baz

<img align="left" width="300" height="200" src="https://gitea.com/assets/img/logo.svg">

- bullet
- items

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: rafh <rafaelheard@gmail.com>

@rafh

) 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>

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Sep 1, 2023

pull-request-size bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Sep 1, 2023

techknowlogick added type/bug topic/ui Change the appearance of the Gitea UI labels Sep 1, 2023

silverwind added the outdated/theme/markdown label Sep 1, 2023

kdumontnu approved these changes Sep 5, 2023

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Sep 5, 2023

rafh added 2 commits September 6, 2023 12:31

posistion checkboxes relative

5ce3479

remove padding from ol and ul

57c05bf

rafh force-pushed the main branch from 7a8eded to 57c05bf Compare September 6, 2023 16:31

kdumontnu reviewed Sep 7, 2023

View reviewed changes

kdumontnu suggested changes Sep 7, 2023

View reviewed changes

GiteaBot added lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Sep 7, 2023

rafh and others added 2 commits September 12, 2023 13:45

Merge branch 'go-gitea:main' into main

41c62f9

offset placement of list-item

3695136

kdumontnu approved these changes Sep 12, 2023

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/blocked A maintainer has reservations with the PR and thus it cannot be merged labels Sep 12, 2023

remove margin for p tags in list-items

9ef0a9c

pull-request-size bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Sep 14, 2023

rafh and others added 2 commits September 22, 2023 11:23

Merge branch 'main' into main

3421f67

prevent vertical centering of checkboxes

caf7a5e

rafh added 3 commits September 26, 2023 12:52

Merge branch 'main' into main

a47a9c7

Merge branch 'main' into main

3a714d3

Merge branch 'main' into main

f5df2d5

delvh approved these changes Sep 27, 2023

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Sep 27, 2023

delvh added the backport/v1.21 This PR should be backported to Gitea 1.21 label Sep 27, 2023

wxiaoguang added the status/blocked This PR cannot be merged yet, i.e. because it depends on another unmerged PR label Sep 28, 2023

Merge branch 'main' into main

fa9143a

update styling to better align with github

4512aeb

wxiaoguang approved these changes Sep 30, 2023

View reviewed changes

lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Sep 30, 2023

Merge branch 'main' into main

ef901d4

lunny removed the status/blocked This PR cannot be merged yet, i.e. because it depends on another unmerged PR label Sep 30, 2023

lunny enabled auto-merge (squash) September 30, 2023 09:10

lunny merged commit 4cb51cb into go-gitea:main Sep 30, 2023
25 checks passed

GiteaBot added this to the 1.22.0 milestone Sep 30, 2023

GiteaBot mentioned this pull request Sep 30, 2023

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

Merged

GiteaBot added backport/done All backports for this PR have been created and removed reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. labels Sep 30, 2023

go-gitea locked as resolved and limited conversation to collaborators Dec 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Absolute positioned checkboxes overlay floated elements #26870

Absolute positioned checkboxes overlay floated elements #26870

rafh commented Sep 1, 2023

silverwind commented Sep 1, 2023

rafh commented Sep 4, 2023 •

edited

Loading

kdumontnu left a comment

rafh commented Sep 6, 2023 •

edited by silverwind

Loading

kdumontnu Sep 7, 2023 •

edited

Loading

rafh Sep 7, 2023

kdumontnu Sep 12, 2023

kdumontnu left a comment

kdumontnu left a comment •

edited

Loading

kdumontnu commented Sep 12, 2023

rafh commented Sep 22, 2023 •

edited

Loading

delvh left a comment

wxiaoguang commented Sep 28, 2023

kdumontnu commented Sep 28, 2023

silverwind commented Sep 28, 2023 •

edited

Loading

rafh commented Sep 29, 2023

Absolute positioned checkboxes overlay floated elements #26870

Absolute positioned checkboxes overlay floated elements #26870

Conversation

rafh commented Sep 1, 2023

silverwind commented Sep 1, 2023

rafh commented Sep 4, 2023 • edited Loading

kdumontnu left a comment

Choose a reason for hiding this comment

rafh commented Sep 6, 2023 • edited by silverwind Loading

kdumontnu Sep 7, 2023 • edited Loading

Choose a reason for hiding this comment

rafh Sep 7, 2023

Choose a reason for hiding this comment

kdumontnu Sep 12, 2023

Choose a reason for hiding this comment

kdumontnu left a comment

Choose a reason for hiding this comment

kdumontnu left a comment • edited Loading

Choose a reason for hiding this comment

dense list

not so dense list

kdumontnu commented Sep 12, 2023

rafh commented Sep 22, 2023 • edited Loading

delvh left a comment

Choose a reason for hiding this comment

wxiaoguang commented Sep 28, 2023

kdumontnu commented Sep 28, 2023

silverwind commented Sep 28, 2023 • edited Loading

rafh commented Sep 29, 2023

rafh commented Sep 4, 2023 •

edited

Loading

rafh commented Sep 6, 2023 •

edited by silverwind

Loading

kdumontnu Sep 7, 2023 •

edited

Loading

kdumontnu left a comment •

edited

Loading

rafh commented Sep 22, 2023 •

edited

Loading

silverwind commented Sep 28, 2023 •

edited

Loading