Проблема с приложением списка дел и длиной элемента списка
Я работаю над приложением Q/A barebone todolist и замечаю, что когда в список добавляется очень длинный элемент списка, он нажимает кнопку.
Есть ли способ увеличить размер элемента LI, когда текстовый узел касается поля кнопки, вместо того, чтобы нажимать кнопку из элемента LI. Ниже приведен скриншот. Я опубликую свой исходный код ниже, но, может быть, это вопрос, который можно быстро решить?
Мой исходный код можно найти здесь - Проблема с плавающими кнопками справа от моего списка дел
используйте другой подход, например создание двух разных разделов большего div, одного левого раздела для текста, который может быть любого размера, и другого раздела для кнопки. Это будет аккуратнее и не будет скрывать текст даже после большого текста.
@AvinashKarhana Возможно, мне придется изменить способ назначения кнопок ли. Кнопки являются дочерними элементами LI
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Хорошо, я обернул текст внутри элемента li с элементом span и добавил, что добавляю отображение сетки в li и даю каждому элементу внутри liwidth, а затем я добавил word-break: break-word;, чтобы строка разорвалась, когда текст span достигнет ширины ограничение и не влияет на удаление button, и я удалил height из li, поэтому li будет расти вместе с линиями на нем
var addItemButton = document.getElementById('addItem')
var onEnter = document.getElementById('newNote')
//below event listener adds an item to the list on click
addItemButton.addEventListener('click', function() {
let item = document.getElementById('newNote').value
let node = document.createElement("li")
let span = document.createElement("span")
let textnode = document.createTextNode(item)
span.appendChild(textnode)
node.appendChild(span)
if (item) {
document.getElementById('list-body').appendChild(node)
}
let node2 = document.createElement('BUTTON')
let textnode2 = document.createTextNode('Delete')
node2.appendChild(textnode2)
node.appendChild(node2)
node2.addEventListener('click', function() {
node2.parentNode.parentNode.removeChild(node)
});
document.getElementById('newNote').value = ''
});
onEnter.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
// Cancel the default action, if needed
event.preventDefault();
// Trigger the button element with a click
addItemButton.click();
}
})
function applyButton() { //onload for dummy data or data from db
let getListObjects = document.querySelectorAll("li")
for (let i = 0; i < getListObjects.length; i++) {
let node2 = document.createElement('BUTTON')
let textnode2 = document.createTextNode('Delete')
node2.appendChild(textnode2)
getListObjects[i].appendChild(node2)
let y = getListObjects[i].querySelector('button')
y.addEventListener('click', function() {
y.parentNode.parentNode.removeChild(getListObjects[i])
});
}
}.container {
height: 100%;
width: 40%;
margin: 0 auto;
}
.container2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: grey;
border: 1px solid grey;
}
#main-grid {
width: 100%;
}
#newNote {
height: 25px;
}
#inputIdForGrid {
justify-content: left;
align-items: center;
display: flex;
padding-left: 0.3em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
button {
padding: 10px 18px;
background-color: green;
border: none;
color: white;
font-size: 14px;
align-self: center;
justify-self: end;
}
#addItem {
margin-left: 1em;
padding: 0.5em;
color: white;
font-size: 1.5em;
float: right;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
li {
padding: 5px 15px;
display: grid;
grid-template-columns: 2.5fr .5fr;
}
span {
word-break: break-word;
grid-column: 1 / 2;
display: flex;
align-items: center;
}
li:nth-child(2n) {
background-color: grey;
}
li>button {
background-color: red;
}
h1 {
text-align: center
}<body onload = "applyButton()">
<h1>Vanilla JS ToDo List - No Jquery, No Bootstrap</h1>
<div class='container'>
<div id='main-grid'>
<div class = "container2">
<div id='inputIdForGrid'>
<input type='text' placeholder = "Enter List Items Here" id='newNote'>
</div>
<div>
<a href='#' id = "addItem">Hi</a>
</div>
</div>
<ul id='list-body'>
<li><span>run all around town. walk all around town. drive all around town</span></li>
<li><span>Buy Apples</span></li>
<li><span>Hit Gym and Lift Bro</span></li>
<li><span>Stretch</span></li>
</ul>
</div>
</div>
</body>P.S. Я отредактировал ваш js-код, чтобы он сгенерировал span и добавил текст внутри него.
я взгляну на все, что вы сделали, и разберу это, чтобы увидеть, как вы заставили все это работать. Я ценю ответ.
Ничего страшного, я вообще ничего не делал :)
A) Если я вас правильно понял, вы можете легко исправить это с помощью CSS-Grid:
li {
display: grid;
grid-template-columns: 3fr 100px;
grid-template-areas: 'text button';
}
li > span {
grid-area: text;
}
li > button {
grid-area: button;
height: 30px;
}
https://jsfiddle.net/axqwhj29/
Поэкспериментируйте с приведенным выше примером, изменив размер области результатов, чтобы убедиться, что это то, что вы ищете.
B) Кроме того, но я не рекомендую вам, если вы действительно не хотите менять свою высоту li и у вас есть максимальная ширина текста (например, 25 символов), вы можете вырезать части своего сообщения в вертикальном виде телефона и если пользователь переворачивается в горизонтальное положение, автоматически отображается весь текст.
https://jsfiddle.net/qfy3mz01/
Надеюсь, это поможет :)
человек, миф, легенда, нет бога, gengs. Лол, а если серьезно, то я именно об этом и говорил. Я новичок в сетке, поэтому все еще не уверен в чем-то. Я поиграю с этим. Я просто заглянул в области шаблонов
хахаха. Лол, я так рад, что мой код помог вам, noobcoderiam ^^ Пожалуйста, не могли бы вы нажать на «Этот ответ полезен» выше, чтобы помочь другим в будущем или/и пометить как решенный :) CSS Grid — мощный инструмент, и его действительно легко проверить из этого: youtu.be/7kVeCqQCxlk
Просто сделайте так, чтобы текст переполнялся по ширине, чтобы кнопка оставалась на том же месте.