Нажав на div, измените положение соседнего div

Question

Я пытаюсь сделать приложение todo. У меня есть вещи, называемые папками, которые можно добавить динамически, и мы можем добавлять предметы todo внутри каждой папки. Все элементы списка присваиваются атрибуту contenteditable. Когда я пытаюсь отредактировать один из элементов списка, позиция div ниже него изменяется. Я не знаю, что вызывает это. Я был у него часами и не нашел никаких подробностей.

Image showing the folders getting realigned

var createFolder = function() { 
 
    var folder = document.createElement("div"); 
 
    folder.classList.add("folder"); 
 
    folder.innerHTML = '<span id="deleteFolder" onclick="deleteFolder(this)"><i class="fa fa-trash-o"></i></span> ' + 
 
    '<span contenteditable="true" onfocusout="checkIfEmpty(this,\'New Folder\')">New Folder</span>' + 
 
    ' <span id="newItem" class="addItem" onclick="addItem(this)"><i class="fa fa-plus"></i></span>' + 
 
    '<ul class="list">' + 
 
    '<li contenteditable="true" onfocusout="checkIfEmpty(this)" class="bigandspacy">New Item</li>' + 
 
    '</ul>'; 
 
    document.getElementById("container").appendChild(folder); 
 
} 
 

 
var checkIfEmpty = function(e, originalContent) { 
 
    if (e.textContent === "") { 
 
    e.textContent = originalContent || "New Item"; 
 
    } 
 
} 
 

 
var deleteFolder = function(e) { 
 
    console.log(e.parentNode); 
 
    document.getElementById("container").removeChild(e.parentNode); 
 
} 
 

 
var addItem = function(e) { 
 
    var elem = document.createElement("li"); 
 
    elem.innerText = "New Item"; 
 
    elem.setAttribute("contenteditable", "true") 
 
    elem.classList.add("bigandspacy"); 
 
    e.parentNode.children[3].appendChild(elem); 
 
} 
 

 
document.getElementById("newFolder").addEventListener('click', createFolder, false);

body { 
 
    background: #E1E1E4; 
 
} 
 
.container { 
 
    position: fixed; 
 
} 
 
.folder { 
 
    display: inline-block; 
 
    position: relative; 
 
    background: #2A2A33; 
 
    width: 40vh; 
 
    margin: 10px; 
 
    border-radius: 8px; 
 
    color: white; 
 
    font-size: 1em; 
 
    float: left; 
 
    min-height: 50px; 
 
} 
 
.folder:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    border-width: 0 30px 30px 0; 
 
    border-style: solid; 
 
    border-color: #666666 #E1E1E4; 
 
} 
 
.folder .fa-trash-o { 
 
    padding: 5px; 
 
    cursor: pointer; 
 
} 
 
.addItem { 
 
    float: right; 
 
    margin-right: 18%; 
 
    margin-top: 2%; 
 
} 
 
li { 
 
    list-style: none; 
 
} 
 
.bigandspacy { 
 
    font-size: 1.2em; 
 
    padding: 5px; 
 
    width: 80%; 
 
    margin-top: 5px; 
 
} 
 
.bigandspacy:focus { 
 
    border: 1px solid white; 
 
} 
 
.bigandspacy:hover { 
 
    cursor: pointer; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<button id="newFolder"><i class="fa fa-plus"></i> 
 
</button> 
 
<div id="container"></div>

Спасибо заранее.

Answer 1

Дайте на вход прозрачную границу так, что она не меняет размер в фокусе:

.bigandspacy{ 
    font-size: 1.2em; 
    padding: 5px; 
    width: 80%; 
    margin-top: 5px; 
    border: 1px solid transparent; 
} 

(Тогда просто обновить border-color на фокусе)

Обновлено скрипку: https://jsfiddle.net/axs5ec89/2/

Answer 2

You может просто добавить маржу к стилю фокусировки - это предотвратит скачок.

.bigandspacy:focus{ 
    border: 1px solid white; 
    margin:-1px; 
}