I need to display some boxes, however when I activate the function to order them the padding between each box desappears. Do you know how to fix this?
JavaScript
x
213
213
1
<html lang="en">2
3
<head>4
<meta charset="utf-8">5
<title>Sito cestini</title>6
<link rel="stylesheet" href="Sito.css"> 7
<link rel="preconnect" href="https://fonts.googleapis.com" rel="preconnect" href="https://fonts.gstatic.com" crossorigin href="https://fonts.googleapis.com/css2?family=Gulzar&display=swap" rel="stylesheet">8
9
<style>10
.vertical {11
border-left: 6px solid black;12
height: 20px;13
position:absolute;14
left: 50%;15
}16
</style>17
18
19
<script> 20
if (navigator.geolocation) {21
navigator.geolocation.getCurrentPosition(mia_posizione);22
}23
24
else{25
alert('La geo-localizzazione NON è possibile');26
} 27
28
function deg2rad(deg) {29
return deg * (Math.PI/180);30
}31
32
function aprox(x){33
if (0.1<x<1){34
var k = x*10;35
var m = Math.ceil(k);36
var t = m *100;37
return t + " m";38
}39
else{40
return Math.ceil(x) + " km";41
}42
}43
44
function mia_posizione(position) {45
46
let latitudini = [47
45.830527, 45.879442, 46.017065, 46.045482, 48
49
];50
let longitudini = [51
9.029344, 8.979577, 8.931969, 8.978964, 52
53
];54
for(let i=0; i<latitudini.length; i++){55
var latLocation = latitudini[i];56
var lonLocation = longitudini[i];57
var latUser = position.coords.latitude;58
var lonUser = position.coords.longitude;59
var R = 6371;60
var dLat = deg2rad(latLocation - latUser);61
var dLon = deg2rad(lonLocation - lonUser);62
var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon/2) * Math.sin(dLon/2); 63
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 64
var y = R * c;65
var Approssimazione = aprox(y)66
document.getElementById(i).setAttribute("data-index", y);67
const Raggio = document.getElementById(i);68
if(Raggio.dataset.index>1000){69
document.getElementById(i).style.display="none"; 70
}71
}72
}73
74
function comparator(a, b) {75
if (a.dataset.index < b.dataset.index)76
return -1;77
if (a.dataset.index > b.dataset.index)78
return 1;79
return 0;80
}81
82
// Function to sort Data83
function SortData() {84
var indexes = document.querySelectorAll("[data-index]");85
var indexesArray = Array.from(indexes);86
let sorted = indexesArray.sort(comparator);87
sorted.forEach(e =>88
document.querySelector("#list").appendChild(e));89
} 90
</script>91
92
</head>93
94
<body>95
<div class="Map"> 96
97
<div class="navbar">98
99
<div class="logo">100
<img src="Cestino.png" width="30px">101
</div>102
103
<nav>104
<ul id="MenuItems">105
<li><a href="">Mappa</a></li>106
<li><a href="">Contatti</a></li>107
<li><a href="">Missione</a></li>108
<li><a href="">Supporta</a></li>109
</ul>110
</nav>111
<img src="hamburger-menu.png" width="20px" class="menu" onclick="menutoggle()">112
</div>113
114
<div class="container">115
116
<div class="row">117
<div class="row-2">118
<h1>Try it!</h1>119
<p> Now</p>120
121
<a class="btn" onclick="SortData();"> Find</a>122
</div>123
124
<div class="row-2">125
<img src="Spazzatura.jpg">126
</div>127
128
</div>129
130
131
132
133
<div class="Mappa">134
135
<ul id="list">136
137
<li class="index" data-index="2" id=0> 138
<div class="via"><h2> Closed </h2> <h3>139
<a href="" class="Indirizzo"> Hello </a></h3>140
141
142
143
<a href="" class="indirizzo"> Info </a></p> 144
<br> 145
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"></div>146
</li> 147
<br>148
149
<li class="index" data-index="1" id=1> <div id=1> </div> 150
<div class="via"><h2> Hello</h2> <h3>151
<a href="" class="Indirizzo"> My name </a></h3>152
153
154
155
<a href="" class="indirizzo"> Info </a></p> 156
<br> 157
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"><img src="canned-food.png"></div>158
</li>159
160
<br>161
<li class="index" data-index="3" id=2> <h3 id=2> </h3> 162
<div class="via"><h2> Hi </h2> <h3>163
<a href="" class="Indirizzo"> Good Morning </a></h3>164
165
<p>166
<a href="" class="indirizzo"> Info </a></p> 167
<br> 168
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div> </li>169
170
<br>171
<li class="index" data-index="3" id=3> <h3 id=3> </h3> <div class="via"><h2> 172
Good afternoon</h2> <h3>173
<a href="" class="Indirizzo"> Hello </a></h3>174
175
<p>176
<a href="" class="indirizzo"> Info </a></p> 177
<br> 178
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div> </li>179
180
181
182
183
184
185
</ul>186
187
188
</div>189
</div>190
</div>191
192
193
<!------toggle menu--------->194
<script>195
var MenuItems = document.getElementById("MenuItems");196
197
MenuItems.style.maxHeight = "0px";198
199
function menutoggle(){200
if(MenuItems.style.maxHeight == "0px")201
{202
MenuItems.style.maxHeight = "200px" 203
}204
else205
{206
MenuItems.style.maxHeight = "0px" 207
}208
}209
</script>210
211
</body>212
</html>213
There is also some css code for the style of the list. But when i execute the function mia_posizione the padding between the boxes is canceled and they are displayed all too close to each other
JavaScript
1
181
181
1
*{2
margin: 0;3
padding: 0;4
box-sizing: border-box;5
}6
7
body{8
font-family: 'Gulzar', serif;9
}10
.navbar{11
display: flex;12
align-items: center;13
padding: 20px;14
background-color: seagreen;15
16
}17
18
nav{19
flex: 1;20
text-align: right; 21
}22
23
nav ul{24
display: inline-block25
flex: 1;26
text-align: right;27
}28
29
nav ul li{30
display: inline-block;31
margin-right: 20px;32
33
}34
35
a{36
text-decoration: none;37
color: black;38
}39
40
p{41
color: black;42
}43
.container{44
max-width: 1300px;45
margin: auto;46
padding-right: 25px;47
}48
.row{49
display: flex;50
align-items: center;51
flex-wrap: wrap;52
justify-content: space-around;53
}54
.row-2{55
flex-basis: 50%;56
min-width: 300px;57
}58
.row-2 img{59
max-width: 100%;60
padding: 50px 0;61
}62
.row-2 h1{63
font-size: 45px;64
line-height: 55px;65
margin: 25px 0;66
}67
.btn{68
display: inline-block;69
background-color: cornflowerblue;70
color: #fff;71
padding: 8px 30px;72
margin: 30px 0;73
border-radius: 30px;74
transition: background 0.5s;75
}76
.btn:hover{77
background-color: palegreen78
}79
80
.Informazioni{81
display: block;82
text-align: center;83
padding: 50px; 84
margin-left: 30px;85
}86
87
.Informazioni h2{88
text-align: center;89
}90
91
.Mappa{92
display: flex;93
align-items: center;94
flex-wrap: wrap;95
justify-content: space-around;96
}97
98
.Mappa ul{99
list-style: none;100
margin: 40px 0;101
102
}103
104
.Mappa li{105
border-style: ridge;106
height: 280px;107
width: 330px;108
}109
110
.Indirizzo{111
text-align:center112
margin-right: 20px;113
}114
115
.Categorie img{116
display: block;117
margin-left: auto;118
margin-right: auto;119
width: 35px;120
padding-top: 20px;121
}122
123
.Indirizzo{124
border-radius: 10px;125
transition: background 0.5s;126
127
}128
.Indirizzo:hover{129
color: skyblue;130
}131
132
.via{133
text-align: center;134
line-height: 30px;135
position: relative;136
top: 20px;137
}138
.Mappa li img{139
width: 35px;140
height: 35px;141
display: inline-block;142
margin: 4px;143
}144
145
146
147
.menu{148
display: none149
}150
151
152
153
}154
155
/*----- Menu on small screens ----*/156
157
@media only screen and (max-width: 800px){158
nav ul{159
position: absolute;160
top: 70px;161
left: 0;162
background: #333;163
width: 100%;164
overflow: hidden;165
transition: 1s;166
}167
nav ul li{168
display: list-item;169
margin-right: 50px;170
margin-bottom: 10px;171
margin-top: 10px;172
}173
nav ul li a{174
color: #fff;175
}176
.menu{177
display: block;178
cursor: pointer;179
}180
}181
Advertisement
Answer
In your original HTML you had <br> nodes between your <li> elements providing some vertical distance. After sorting the list items you then append()-ed the <li> directly one after the other – without the <br> nodes between them into the <ul> container.
In the following snippet I removed the <br> nodes and introduced some spacing between the <li> elements with the CSS directive #list li {margin-bottom:2em}:
JavaScript
1
79
79
1
if (navigator.geolocation) {2
navigator.geolocation.getCurrentPosition(mia_posizione);3
} else {4
alert('La geo-localizzazione NON è possibile');5
}6
7
function deg2rad(deg) {8
return deg * (Math.PI / 180);9
}10
11
function aprox(x) {12
if (0.1 < x < 1) {13
var k = x * 10;14
var m = Math.ceil(k);15
var t = m * 100;16
return t + " m";17
} else {18
return Math.ceil(x) + " km";19
}20
}21
22
function mia_posizione(position) {23
24
let latitudini = [25
45.830527, 45.879442, 46.017065, 46.045482,26
27
];28
let longitudini = [29
9.029344, 8.979577, 8.931969, 8.978964,30
31
];32
for (let i = 0; i < latitudini.length; i++) {33
var latLocation = latitudini[i];34
var lonLocation = longitudini[i];35
var latUser = position.coords.latitude;36
var lonUser = position.coords.longitude;37
var R = 6371;38
var dLat = deg2rad(latLocation - latUser);39
var dLon = deg2rad(lonLocation - lonUser);40
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(deg2rad(latUser)) * Math.cos(deg2rad(latLocation)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);41
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));42
var y = R * c;43
var Approssimazione = aprox(y)44
document.getElementById(i).setAttribute("data-index", y);45
const Raggio = document.getElementById(i);46
if (Raggio.dataset.index > 1000) {47
document.getElementById(i).style.display = "none";48
}49
}50
}51
52
function comparator(a, b) {53
if (a.dataset.index < b.dataset.index)54
return -1;55
if (a.dataset.index > b.dataset.index)56
return 1;57
return 0;58
}59
60
// Function to sort Data61
function SortData() {62
var indexes = document.querySelectorAll("[data-index]");63
var indexesArray = Array.from(indexes);64
let sorted = indexesArray.sort(comparator);65
sorted.forEach(e =>66
document.querySelector("#list").appendChild(e));67
}68
69
var MenuItems = document.getElementById("MenuItems");70
71
MenuItems.style.maxHeight = "0px";72
73
function menutoggle() {74
if (MenuItems.style.maxHeight == "0px") {75
MenuItems.style.maxHeight = "200px"76
} else {77
MenuItems.style.maxHeight = "0px"78
}79
}JavaScript
1
191
191
1
* {2
margin: 0;3
padding: 0;4
box-sizing: border-box;5
}6
7
.vertical {8
border-left: 6px solid black;9
height: 20px;10
position: absolute;11
left: 50%;12
}13
14
#list li {margin-bottom:2em}15
body {16
font-family: 'Gulzar', serif;17
}18
19
.navbar {20
display: flex;21
align-items: center;22
padding: 20px;23
background-color: seagreen;24
}25
26
nav {27
flex: 1;28
text-align: right;29
}30
31
nav ul {32
display: inline-block flex: 1;33
text-align: right;34
}35
36
nav ul li {37
display: inline-block;38
margin-right: 20px;39
}40
41
a {42
text-decoration: none;43
color: black;44
}45
46
p {47
color: black;48
}49
50
.container {51
max-width: 1300px;52
margin: auto;53
padding-right: 25px;54
}55
56
.row {57
display: flex;58
align-items: center;59
flex-wrap: wrap;60
justify-content: space-around;61
}62
63
.row-2 {64
flex-basis: 50%;65
min-width: 300px;66
}67
68
.row-2 img {69
max-width: 100%;70
padding: 50px 0;71
}72
73
.row-2 h1 {74
font-size: 45px;75
line-height: 55px;76
margin: 25px 0;77
}78
79
.btn {80
display: inline-block;81
background-color: cornflowerblue;82
color: #fff;83
padding: 8px 30px;84
margin: 30px 0;85
border-radius: 30px;86
transition: background 0.5s;87
}88
89
.btn:hover {90
background-color: palegreen91
}92
93
.Informazioni {94
display: block;95
text-align: center;96
padding: 50px;97
margin-left: 30px;98
}99
100
.Informazioni h2 {101
text-align: center;102
}103
104
.Mappa {105
display: flex;106
align-items: center;107
flex-wrap: wrap;108
justify-content: space-around;109
}110
111
.Mappa ul {112
list-style: none;113
margin: 40px 0;114
}115
116
.Mappa li {117
border-style: ridge;118
height: 280px;119
width: 330px;120
}121
122
.Indirizzo {123
text-align: center margin-right: 20px;124
}125
126
.Categorie img {127
display: block;128
margin-left: auto;129
margin-right: auto;130
width: 35px;131
padding-top: 20px;132
}133
134
.Indirizzo {135
border-radius: 10px;136
transition: background 0.5s;137
}138
139
.Indirizzo:hover {140
color: skyblue;141
}142
143
.via {144
text-align: center;145
line-height: 30px;146
position: relative;147
top: 20px;148
}149
150
.Mappa li img {151
width: 35px;152
height: 35px;153
display: inline-block;154
margin: 4px;155
}156
157
.menu {158
display: none159
}160
161
162
}163
164
/*----- Menu on small screens ----*/165
@media only screen and (max-width: 800px) {166
nav ul {167
position: absolute;168
top: 70px;169
left: 0;170
background: #333;171
width: 100%;172
overflow: hidden;173
transition: 1s;174
}175
176
nav ul li {177
display: list-item;178
margin-right: 50px;179
margin-bottom: 10px;180
margin-top: 10px;181
}182
183
nav ul li a {184
color: #fff;185
}186
187
.menu {188
display: block;189
cursor: pointer;190
}191
}JavaScript
1
67
67
1
<div class="Map">2
<div class="navbar">3
<div class="logo">4
<img src="Cestino.png" width="30px">5
</div>6
<nav>7
<ul id="MenuItems">8
<li><a href="">Mappa</a></li>9
<li><a href="">Contatti</a></li>10
<li><a href="">Missione</a></li>11
<li><a href="">Supporta</a></li>12
</ul>13
</nav>14
<img src="hamburger-menu.png" width="20px" class="menu" onclick="menutoggle()">15
</div>16
<div class="container">17
<div class="row">18
<div class="row-2">19
<h1>Try it!</h1>20
<p> Now</p>21
<a class="btn" onclick="SortData();">Find</a>22
</div>23
<div class="row-2">24
<img src="Spazzatura.jpg">25
</div>26
</div>27
<div class="Mappa">28
<ul id="list">29
<li class="index" data-index="2" id=0>30
<div class="via">31
<h2> Closed </h2>32
<h3><a href="" class="Indirizzo"> Hello </a></h3>33
<a href="" class="indirizzo"> Info </a></p>34
<br>35
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"></div>36
</li>37
<li class="index" data-index="1" id=1>38
<div id=1> </div>39
<div class="via">40
<h2> Hello</h2>41
<h3><a href="" class="Indirizzo"> My name </a></h3>42
<a href="" class="indirizzo"> Info </a></p>43
<br>44
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="shirt.png"><img src="battery.png"><img src="documents.png"><img src="television.png"><img src="canned-food.png"></div>45
</li>46
<li class="index" data-index="3" id=2>47
<h3 id=2> </h3>48
<div class="via">49
<h2> Hi </h2>50
<h3><a href="" class="Indirizzo"> Good Morning </a></h3>51
<p><a href="" class="indirizzo"> Info </a></p>52
<br>53
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div>54
</li>55
<li class="index" data-index="3" id=3>56
<h3 id=3> </h3>57
<div class="via">58
<h2>Good afternoon</h2>59
<h3><a href="" class="Indirizzo"> Hello </a></h3>60
<p><a href="" class="indirizzo"> Info </a></p>61
<br>62
<img src="water.png"> <img src="wine.png"> <img src="wood.png"> <img src="battery.png"><img src="documents.png"><img src="television.png"> <img src="canned-food.png"> <img src="leaf.png"></div>63
</li>64
</ul>65
</div>66
</div>67
</div>