I had previously posted about this issue, but I deleted it after making some progress. I am currently facing a problem with my todo list project when resizing the screen. My project involves using JavaScript to create a new list item for each entry. Users input a task, and then a checkbox and remove icon are added. The issue arises on smaller screens, where the checkbox and remove icon move up a layer when a longer task name is entered. I am utilizing Bootstrap 4 to maintain the layout on my HTML side. Please refer to the image for clarity. I suspect the JavaScript code might be causing the problem.
Here is how the list appears on a medium-sized screen, with the checkbox/trash icon correctly positioned to the right of the item. https://i.sstatic.net/TDLoh.png
The problem occurs when the screen size decreases. As the text breaks down, the checkbox/trash icon moves up a line. How can I ensure that they stay on the same line as the text? I attempted setting the "li" element width to "90%;" with the checkbox/remove icon occupying the remaining 10%, but it did not improve the situation. I'm uncertain about the solution. Below, I will attach the relevant code snippet. https://i.sstatic.net/RnL5l.png
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i < todos.length; i++) {
html += '<span><input class="checkBox" type="checkbox"><li style="float:left;">' + todos[i] + '</li>' + '<button class="remove" id="' + i + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
} body, html { /*makes the background image stretch the whole screen*/
height:100%;
}
body {
background-image:url('campingBackground.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size:cover;
}
.checkBox {
margin-right:10px;
height:18px;
width:18px;
}
.checkBox:hover {
background-color:#C0C0C0;
}
.remove { /*Trash can button*/
color:white;
font-size:24px;
border:0;
padding:0;
background-color:transparent;
}
.remove:hover {
color:#C0C0C0;
}
ul {
text-align:right; /*This pushes the checkbox/trash can right while the <li> in the js file floats the todo text left*/
list-style-type:none;
padding-left:0px; /*Makes up for not having the bullet point spacing on smaller screens*/
font-size:24px;
color:white;
font-weight:600;
}
li {
text-align:left;
}<div class="header">
<div class="container" style="padding-top:50px;">
<div class="row justify-content-center"> <!--Input Box-->
<div class="col-sm-12 col-lg-8">
<h1>To-Do List</h1>
<div class="form-group">
<input type="text" class="form-control" id="task">
</div>
</div>
</div>
<div class="row"> <!--Add Button-->
<div class="col"></div>
<div class="col-xs-2" style="margin-right:15px; margin-top:30px;">
<button id="add" style="border-radius:50%; font-size:35px; width:65px;" class="btn btn-danger">+</button>
</div>
</div>
</div>
</div>
<div class="container text"> <!--ToDos-->
<div class="row justify-content-center" style="margin-top:20px;">
<div class="col-sm-12 col-sm-8">
<div id="todos"></div>
</div>
</div>
</div>