Issue
I have a div that drops down on click and shows some elements.
The problem I have is that these elements overlap the parent container and cover my "Confirm" button below.
- I want the container to adjust according to the elements inside
- How could I make the elements inside my dropdown div fit their container?
function mostrarMapa() {
var mapaContainer = document.getElementById("mapa");
var notaInput = document.getElementById("nota");
var checkbox = document.getElementById("mostrarMapaCheckbox");
if (checkbox.checked) {
mapaContainer.style.display = "block";
notaInput.style.display = "block";
} else {
mapaContainer.style.display = "none";
notaInput.style.display = "none";
}
}
function seleccionarDireccion(elemento, direccion, ciudad) {
var elementosDireccion = document.querySelectorAll('.direcciones-barracuda');
elementosDireccion.forEach(function(elem) {
elem.classList.remove('selected');
});
elemento.classList.add('selected');
alert('Dirección seleccionada:\n' + direccion + '\n' + ciudad);
}
function confirmar() {
alert("Pedido confirmado");
}
.direcciones-barracuda {
display: flex;
align-items: center;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
transition: border-color 0.3s;
position: relative;
}
.icono-ubicacion {
width: 20px;
height: 20px;
margin-right: 5px;
}
.direccion-info {
display: flex;
flex-direction: column;
margin-left: 5px;
}
.direccion-info span {
display: block;
}
.direcciones-barracuda.selected {
border-color: #E05228;
}
.mapa-container {
display: none;
padding: 10px;
}
#mostrarMapaContainer {
clear: both;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
#mapa {
height: 300px;
width: 100%;
margin-top: 10px;
}
#nota {
width: 100%;
margin-top: 10px;
}
#confirmarBtn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #E05228;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
<div class="card" style="padding: 1rem;">
<div class="table-wrapper">
<span>Where do we send your order?</span>
<div style="display: flex; flex-wrap: wrap;">
<div class="direcciones-barracuda">
<span>SOME TEXT</span>
</div>
</div>
<div id="mostrarMapaContainer">
<input type="checkbox" id="mostrarMapaCheckbox" onclick="mostrarMapa()">
<label for="mostrarMapaCheckbox">New Adress</label>
<div id="mapa" class="mapa-container">
<input type="text" id="direccionCompleta" placeholder="Enter full address" style="width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 10px;">
<!-- Agregado un mapa ficticio para mostrar la dirección seleccionada -->
<div style="height: 200px; background-color: #f0f0f0; margin-bottom: 10px;"></div>
<input type="text" id="referencia" placeholder="References" style="width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 10px;">
<div style="display: flex; justify-content: space-between;">
<input type="text" id="nota" placeholder="Notes" style="width: 48%; box-sizing: border-box; padding: 10px;">
<input type="text" id="celular" placeholder="Phone" style="width: 48%; box-sizing: border-box; padding: 10px;">
</div>
</div>
</div>
<button class="" id="confirmarBtn" onclick="confirmar()">CONFIRM</button>
</div>
</div>
Solution
Remove the height
setting on the #mapa
element. You're forcing it to a specific height even though its content is longer. If you remove that setting, the element will size itself dynamically.
#mapa {
/* height: 300px; REMOVE THIS */
width: 100%;
margin-top: 10px;
}
Also note that you can improve the quality of your code by removing the inline CSS styling and JS event handlers from your HTML code. Put the CSS in an external stylesheet (as you already have one there's no reason not to use it) and bind your event handlers directly in the JS code.
Here's a working example with the above fixes implemented:
document.querySelector('#mostrarMapaCheckbox').addEventListener('click', () => {
var mapaContainer = document.getElementById("mapa");
var notaInput = document.getElementById("nota");
var checkbox = document.getElementById("mostrarMapaCheckbox");
if (checkbox.checked) {
mapaContainer.style.display = "block";
notaInput.style.display = "block";
} else {
mapaContainer.style.display = "none";
notaInput.style.display = "none";
}
})
function seleccionarDireccion(elemento, direccion, ciudad) {
var elementosDireccion = document.querySelectorAll('.direcciones-barracuda');
elementosDireccion.forEach(function(elem) {
elem.classList.remove('selected');
});
elemento.classList.add('selected');
alert('Dirección seleccionada:\n' + direccion + '\n' + ciudad);
}
document.querySelector('#confirmarBtn', () => {
alert("Pedido confirmado");
});
.direcciones-barracuda-wrapper {
display: flex;
flex-wrap: wrap;
}
.direcciones-barracuda {
display: flex;
align-items: center;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
transition: border-color 0.3s;
position: relative;
display: flex;
flex-wrap: wrap;
}
.icono-ubicacion {
width: 20px;
height: 20px;
margin-right: 5px;
}
.direccion-info {
display: flex;
flex-direction: column;
margin-left: 5px;
}
.direccion-info span {
display: block;
}
.direcciones-barracuda.selected {
border-color: #E05228;
}
.mapa-container {
display: none;
padding: 10px;
}
#mostrarMapaContainer {
clear: both;
border: 1px solid #ccc;
width: 100%;
box-sizing: border-box;
padding: 10px;
}
#direccionCompleta,
#referencia {
width: 100%;
box-sizing: border-box;
padding: 10px;
margin-bottom: 10px;
}
#mapa {
width: 100%;
margin-top: 10px;
}
.nota-wrapper {
display: flex;
justify-content: space-between;
}
#nota {
margin-top: 10px;
width: 48%;
box-sizing: border-box;
padding: 10px;
}
#celular {
width: 48%;
box-sizing: border-box;
padding: 10px;
}
#confirmarBtn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #E05228;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.foo {
height: 200px;
background-color: #f0f0f0;
margin-bottom: 10px;
}
<div class="card" style="padding: 1rem;">
<div class="table-wrapper">
<span>Where do we send your order?</span>
<div class="direcciones-barracuda-wrapper">
<div class="direcciones-barracuda">
<span>SOME TEXT</span>
</div>
</div>
<div id="mostrarMapaContainer">
<input type="checkbox" id="mostrarMapaCheckbox" />
<label for="mostrarMapaCheckbox">New Adress</label>
<div id="mapa" class="mapa-container">
<input type="text" id="direccionCompleta" placeholder="Enter full address" />
<div class="foo"></div>
<input type="text" id="referencia" placeholder="References" />
<div class="nota-wrapper">
<input type="text" id="nota" placeholder="Notes" />
<input type="text" id="celular" placeholder="Phone" />
</div>
</div>
</div>
<button class="" id="confirmarBtn">CONFIRM</button>
</div>
</div>
Answered By - Rory McCrossan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.