How can I align these list elements with some buttons?
Question
I want to align some list elements that are created via Javascript with their corresponding buttons. Every time I add a new element to the list, the text appears in a lower position than the "X/Remove element" buttons. Can you please tell me what I'm doing wrong?
You can check the pen right here:
https://codepen.io/Watashi10/pen/RwwQegr
The ideal thing would be to have the list elements and the X buttons in the same line or at the same height under the "input" element.
Here is a screenshot of the actual list
HTML:
<body>
<div class="container d-flex align-items-center h-100">
<div class="row">
<header class="text-center col-12">
<h1 id="header">My Shopping List</h1>
</header>
<input class="text-center col-6" id="userinput" type="text" placeholder="add items">
<section class="row">
<button id="enter">Enter</button>
</section>
<div class="text-center col-12" id="shopping">
<ul class="list" style="list-style: none">
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
CSS:
body,
html {
width: 100%;
height: 100%;
font-family: 'Fjalla One', sans-serif;
background: url("https://wallpaperplay.com/walls/full/5/6/5/68320.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.container {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
flex-wrap: wrap;
width: 15vw;
margin: 0 auto;
min-height: 50vh;
}
.row {
display: flex;
justify-content: center;
flex-direction: row;
}
#header {
display: inline-block;
position: relative;
bottom: 200px;
font-family: 'Fredericka the Great';
font-size: 5rem;
color: white;
}
input {
flex-grow: 5rem;
border: none;
padding: 25px;
}
button {
border: 1px solid;
background: blue;
color: white;
}
input, button {
position: relative;
bottom: 50px;
}
.userinput {
float: left;
}
h2 {
font-family: 'Fredericka the Great';
color:#FFB6C1;
font-size: 12px;
}
ul li {
padding: 3rem;
font-family: 'Fredericka the Great';
font-size: 25px;
color: #ffffff;
}
.done {
text-decoration: line-through;
}
I would appreciate any kind of help. Thank you!
2 answers
solution1
0 ACCPTED 2019-11-04 23:49:43
Remove the bottom: 50px from
input, button {
position: relative;
bottom: 50px; //remove this
}
or if you want input to have bottom: 50px; seperate the css styling of them.
input {
position: relative;
bottom: 50px;
}
button {
position: relative;
margin-left: 15px !important; //just to make it a little nicer
}
solution2
0 2019-11-04 23:49:51
You need to overrid the position: relative; and bottom: 50px; given for the button. Instead use position: static; which is the default.
var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); function inputLength() { return input.value.length; } function deleteButton() { var btn = document.createElement("button"); btn.appendChild(document.createTextNode("Delete")); li.appendChild(btn); btn.onclick = removeParent; } function createListElement() { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; var btn = document.createElement("button"); btn.appendChild(document.createTextNode("X")); li.appendChild(btn); btn.onclick = removeParent; } function removeParent(event) { event.target.parentNode.remove(); } function addListAfterClick() { if (inputLength() > 0) { createListElement(); } } function addListAfterKeypress(event) { if (inputLength() > 0 && event.keyCode === 13) { createListElement(); } } function toggle(event) { event.target.classList.toggle("done"); } button.addEventListener("click", addListAfterClick); input.addEventListener("keypress", addListAfterKeypress); ul.addEventListener("click", toggle);
body, html { width: 100%; height: 100%; font-family: 'Fjalla One', sans-serif; background: url("https://wallpaperplay.com/walls/full/5/6/5/68320.jpg") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }.container { display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 15vw; margin: 0 auto; min-height: 50vh; }.row { display: flex; justify-content: center; flex-direction: row; } #header { display: inline-block; position: relative; bottom: 200px; font-family: 'Fredericka the Great'; font-size: 5rem; color: white; } input { flex-grow: 5rem; border: none; padding: 25px; } button { border: 1px solid; background: blue; color: white; } input, button { position: relative; bottom: 50px; }.userinput { float: left; } h2 { font-family: 'Fredericka the Great'; color: #FFB6C1; font-size: 12px; } ul li { padding: 3rem; font-family: 'Fredericka the Great'; font-size: 25px; color: #ffffff; } ul li button { position: static; margin-left: 1em; }.done { text-decoration: line-through; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Fredericka+the+Great&display=swap" rel="stylesheet"> <div class="container d-flex align-items-center h-100"> <div class="row"> <header class="text-center col-12"> <h1 id="header">My Shopping List</h1> </header> <input class="text-center col-6" id="userinput" type="text" placeholder="add items"> <section class="row"> <button id="enter">Enter</button> </section> <div class="text-center col-12" id="shopping"> <ul class="list" style="list-style: none"> </ul> </div> </div> </div>
solution3
0 2019-11-04 23:52:24
So you're creating a textnode from the user input box here:
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
I would recommend making this a div or ap or something else that can be styled. Like so:
let inputValue = document.createElement('div');
inputValue.innerHTML = input.value;
li.prepend(inputValue)
input.value = "";
So you're li sctucture should look more like this:
<li>
<div class="value"></div>
<button></button>
</li>
After that, theres many ways to have these be inline. You could style the li to have a display: flex , or you could float the button to the right within the li . But I would start with making the value that you catch and put into the li something besides just the textNode.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.