Como te dije en comentarios, con block
haces que el elemento se coloque abajo y necesitas cambiar por inline-block
. Prueba con este fragmento de código para ver que funciona correctamente:
function showNumber() {
check = document.getElementById("node-input-sendWithTimeOut");
element = document.getElementById("content");
if (check.checked) {
element.style.display = 'inline-block';
} else {
element.style.display = 'none';
}
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3 input-group input-group-sm">
<input class="form-check-input" id="node-input-sendFullArray" type="checkbox" name="checkeo"> <i class="fa fa-send"></i> Send full array
<label class="form-check-label" for="sendFullArray"></label>
</div>
<div class="col-xs-12 col-md-3 input-group input-group-sm">
<input class="form-check-input" id="node-input-sendRandomElement" type="checkbox" name="checkeo"> <i class="fa fa-random"></i> Send random element
<label class="form-check-label" for="sendRandomElement"></label>
</div>
<div class="col-xs-12 col-md-3 input-group input-group-sm">
<input class="form-check-input" id="node-input-sendWithTimeOut" type="checkbox" name="checkeo" onchange="showNumber()"> <i class="fa fa-clock-o" aria-hidden="true"></i> Send with timeout
<label class="form-check-label" for="sendWithTimeOut"></label>
<div id="content" style="display: none;">
<input class="form-check-input" id="node-input-seconds" type="number" min="1" max="99" name="checkeo" style="width: 15%;"> </i> seconds
<label class="form-check-label" for="seconds">
</label>
</div>
</div>
</div>
</div>
Si aún se sigue manteniendo abajo, debes revisar los estilos CSS, probablemente tengas una regla que force el elemento (un hijo o un previo) a comportarse como bloque. Te sugiero checar #node-input-sendWithTimeOut
, #content
y #node-input-seconds
.
Finalmente, algunas recomendaciones:
- No uses estilos en línea:
<div id="content" style="display: none;">
, mejor usa una clase para ocultar <div id="content" class="oculto">
y con Javascript puedes quitar la clase para que se muestre y agregarla para volver a ocultar
- No uses eventos en línea:
<input ... name="checkeo" onclick="showNumber()">
, es mejor obtener el elemento y asignar el evento desde Javascript
- Las etiquetas
<label>
son útiles para ayudar a acceder al campo al que están relacionadas y, si están vacías, no tiene sentido que las uses. Además, el atributo for
debe contener ID de elemento al que están asociadas
Aplicando estas recomendaciones. tu código quedaría más o menos así:
// Obtener checkbox
let check = document.querySelector('#node-input-sendWithTimeOut');
// Asignar evento
check.addEventListener('change', showNumber);
function showNumber() {
element = document.getElementById("content");
// Check se definió fuera de la función
if (check.checked) {
// Quitar clase para que se pueda mostrar
element.classList.remove('oculto');
} else {
// Agregar clase para ocultar
element.classList.add('oculto');
}
}
#content {
display: inline-block;
}
#content.oculto {
display: none;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3 input-group input-group-sm">
<input class="form-check-input" id="node-input-sendFullArray" type="checkbox" name="checkeo">
<label class="form-check-label" for="node-input-sendFullArray">
<i class="fa fa-send"></i> Send full array
</label>
</div>
<div class="col-xs-12 col-md-3 input-group input-group-sm">
<input class="form-check-input" id="node-input-sendRandomElement" type="checkbox" name="checkeo">
<label class="form-check-label" for="node-input-sendRandomElement">
<i class="fa fa-random"></i> Send random element
</label>
</div>
<div class="col-xs-12 col-md-3 input-group input-group-sm">
<input class="form-check-input" id="node-input-sendWithTimeOut" type="checkbox" name="checkeo">
<label class="form-check-label" for="node-input-sendWithTimeOut">
<i class="fa fa-clock-o" aria-hidden="true"></i> Send with timeout
</label>
<div id="content" class="oculto">
<input class="form-check-input" id="node-input-seconds" type="number" min="1" max="99" name="checkeo" style="width: 15%;">
<label class="form-check-label" for="node-input-seconds">
<i class="fa fa-clock-o"></i> seconds
</label>
</div>
</div>
</div>
</div>
<div>
usa una etiqueta en línea como<span>
.block
a la propiedaddisplay
, automáticamente lo estás colocando abajo. Cambia porinline-block
.