mirror of
https://github.com/go-gitea/gitea.git
synced 2024-09-05 23:34:19 -04:00
Absolute positioned checkboxes overlay floated elements (#26870)
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>
This commit is contained in:
parent
7d14aa062f
commit
4cb51cb985
@ -155,23 +155,29 @@
|
||||
|
||||
.markup .task-list-item {
|
||||
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"] {
|
||||
position: absolute;
|
||||
top: 0.25em;
|
||||
left: -1.6em;
|
||||
margin: 0 .3em .25em -1.4em;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markup .task-list-item p {
|
||||
line-height: 1.5rem;
|
||||
.markup .task-list-item input[type="checkbox"] + p {
|
||||
margin-left: -0.2em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.markup .task-list-item > p {
|
||||
margin-inline: 16px;
|
||||
}
|
||||
|
||||
.markup .task-list-item + .task-list-item {
|
||||
margin-top: 3px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.markup input[type="checkbox"] {
|
||||
@ -327,7 +333,7 @@
|
||||
|
||||
.markup img[align="left"],
|
||||
.markup video[align="left"] {
|
||||
padding-right: 20px;
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.markup .emoji {
|
||||
|
Loading…
Reference in New Issue
Block a user