0

Estoy intentando hace rato pero no me sale de ninguna forma. Intenté con labels, con parrafos, pero no puedo hacer que el checkbox me aparezca al lado de cada uno de mis parrafos (que son los gustos de helado)

introducir la descripción de la imagen aquí

Necesito agregarle un checkbox lo más posible a la derecha de cada uno de mis gustos de helado.

El único tema es que los gustos son dinámicos, vienen de la base de datos, pero no creo que sea un problema para la vista de todas formas ...

Alguna idea ??

HTML:

<!-- Modal -->
<div id="vasoModal" class="modal">
    <div class="modal-content">
        <h4 class="modal-title">Vasito</h4>
        <h6>Seleccione hasta dos gustos</h6>
        <table class="tabla">
            <tr>
                <td>Dulce de leche con nuez:</td>
                <td class="tablaInput"><input class="single-checkbox" type="checkbox"/></td>
            </tr>
            <tr>
                <td>Frutas del bosque</td>
                <td class="tablaInput"><input class="single-checkbox" type="checkbox"/></td>
            </tr>
        </table>
    </div>

La lógica me indica que así estaría bien, pero el checkbox así me sale en cualquier otro lado, ni siquiera es visible en la página.

Acá el CSS por si es necesario:

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.modal-title{
    text-align: center;
    background-color: #D1B091;
    width: 100%;
    padding: 10px;
}

.flavour{
    font-size: 20px;
    line-height: 15px;
    border-bottom: 1px solid darkgrey;
    padding: 10px;
}

   h6{
    text-align:center;
}

.tabla{
  width: 100%;
  border: 1px solid black;
}
.tablaInput{
  border: 1px solid black;
  float: right;
}

1 respuesta 1

1

Creo que una solución puede ser crear una tabla, en la que en la primera columna esté el sabor del halado y el la segunda el checkbox:

<div id="vasoModal" class="modal">
    <div class="modal-content">
        <h4 class="modal-title">Vasito</h4>
        <h6>Seleccione hasta dos gustos</h6>
        <table class="tabla">
          <tr>
            <td>Dulce de leche con nuez:</td>
            <td class="tablaInput"><input class="single-checkbox" type="checkbox"/></td>
          </tr>
          <tr>
            <td>Frutas del bosque</td>
            <td class="tablaInput"><input class="single-checkbox" type="checkbox"/></td>
          </tr>
        </table>
    </div>
</div>

En este caso yo he puesto dos ejemplos.

Por último, haces que la tabla ocupe todo el contenido del modal y haces que la columna que contiene el input esté a la derecha:

CSS:

.tabla{
  width: 100%;
  border: 1px solid black;
}
.tablaInput{
  border: 1px solid black;
  float: right;
}
3
  • Sigue sin funcionar ... :( Los checkbox me salen raros y ahora los gustos tienen un cuadrado alrededor que no me gusta mucho ... la línea quedaba mejor ... gracias igual el 21 nov. 2018 a las 21:02
  • 1
    @NachoZveDeLaTorre ¿Podrías editar tu pregunta añadiendo el código más reciente que tengas? Sería mucho más fácil ayudarte, pudiendo partir de tu ejemplo actual. Aunque sin borrar lo anterior, ya que es importante saber el contenido inicial de la pregunta. el 21 nov. 2018 a las 23:12
  • Si, sigo teniendo el mismo que antes ... y le agregue lo que me respondieron arriba pero no funciona. Edito para que veas ! el 23 nov. 2018 a las 13:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.